Responsive design - Media Query not working on iPhone?

Asked 21/10, 2012 at 22:15 Answered 20/3 at 9:23

Solved css mobile responsive-design media-queries

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/

Resolutive answered 21/10, 2012 at 22:15 Comment(0)

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/

Teplitz answered 22/10, 2012 at 0:9 Comment(2)

thank you very much for the answer.. this answer helps me a lot.. but small correction my friend coopersita.. you are missing a closing " on your tag ;) – Hartzel 3/1, 2013 at 10:5

I attempted to edit this answer to fix the incorrect syntax but it was rejected. It should be (almost like user1506194's answer): <meta name="viewport" content="width=device-width, initial-scale=1.0"> – Rishi 19/9, 2013 at 6:25

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">

Mercedezmerceer answered 21/8, 2013 at 13:7 Comment(0)

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!

Bethezel answered 3/3, 2018 at 23:16 Comment(1)

though i've included all comment lines and meta tag, still my app is not working – Antiperistalsis 31/1, 2019 at 5:33

You can also use this - "shrink-to-fit=no"

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The shrink-to-fit=no attribute in a meta tag for viewport settings is used to prevent the automatic shrinking of the viewport width to fit the content on mobile devices. When shrink-to-fit is set to no, it ensures that the width of the viewport remains fixed, typically at the device's width in pixels, regardless of the content size. This can help maintain the layout and prevent unexpected scaling of elements on the page. It's particularly useful when designing responsive websites where precise control over layout and design is desired across various devices. you also check Screen Sizes of Apple iPhones so that it's possible to choose the perfect screen size for responsive design.... (or)

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

Raina answered 20/3 at 9:23 Comment(0)

Recommended topics

Hot tags