Search code examples
ioscssiphoneresponsive-designviewport

responsive/viewport working in browsers but not in ios

I think I'm losing my mind.

I have a site that the media queries and responsive behaviors are working just fine resizing in Chrome, Firefox, and Safari, and is testing fine on my Android phone, but for some reason that I cannot figure out, it will not work on several iPhones and an iPad that I've tested on.

To answer your first question, my viewport is definitely there...

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

...and I even tried putting in every CSS version I could to make sure that's not the issue.

@-wekbit-viewport{width:device-width;zoom:1;}
@-ms-viewport{width:device-width;zoom:1;}
@-o-viewport{width:device-width;zoom:1;}
@viewport{width:device-width;zoom:1;}

Still no dice. I have validated my media queries and the code all looks good. I am at a loss here. Any suggestions would be greatly appreciated.

Solution

  • It looks like on iOS devices, your site is injecting an extra viewport meta tag into the <head>:

    <meta name="viewport" content="width=1100">

    That's what I saw on my iPhone6 simulator, and it is probably overriding your first viewport meta tag. I'm guessing you have a WordPress plugin that's trying to be too smart, and is injecting this extra tag only for iOS devices. I'd recommend your first step should be auditing your plugins, turning off anything that might be the culprit, and confirming the tag is gone by using the free Xcode iOS simulator and debugging with Safari.

    Good luck!