Responsive design - Media Query not working on iPhone?

css mobile responsive-design media-queries
Gearu picture Gearu · Oct 22, 2012 · Viewed 43.7k times · Source

I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.

I've created some media queries, that behave correctly in a browser when resizing on a desktop.

On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?

Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:

http://www.preview.brencecoghill.com/

Answer

coopersita picture coopersita · Oct 22, 2012

Do you have the meta for view port in your html?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Related questions

Common breakpoints for media queries on a responsive site

So I am working on my first responsive website which makes extensive use of media queries. I was wondering if there are some common page-widths I should optimize for. I will probably have a maximum width (not going full fluid) …

Read More
Which are the most important media queries to use in creating mobile responsive design?

There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found …

Read More
How to write different HTML for different screen sizes

I understood how I change CSS via media queries (such as media="screen and (max-width:640px)") but let's say I want to write (just for example) <div> [if screen resolution is lower then 960 px] <div> some …

Read More