Responsive design - Media Query not working on iPhone?

css mobile responsive-design media-queries

46,562

Solution 1

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/

Solution 2

I think you'll find a warning in Chrome with ; instead of , This should work just fine:

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

Solution 3

I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...

My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:

<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">

Finally, my pages were responsive on the mobile devices. Weird!

46,562

Author by

Gearu

Updated on March 04, 2020

Comments

Gearu about 4 years

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/