1

So I'm having a strange issue with my responsive websites when switching from portrait to landscape mode on my iOS device. You can take a look at the live site here: http://www.aptify.com

If you view the site in portrait mode, then rotate the iOS device it's zoomed in.

I currently have the following meta:

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

I found one question similar to this: Media Queries - Landscape Mode on iPhone way too oversized, however the question was never given a correct answer. The only answer did mention using something similar to my tag above, but it was only: <meta name="viewport" content="width=device-width" /> without initial-scale=1.0 - does this make a difference?

I would also like to note this does not happen on android devices, only iOS devices.

Anyone have and fixed this issue before?

Thanks for your help!

Community
  • 1
  • 1
Jeremy Miller
  • 373
  • 6
  • 21
  • 1
    There is a Filament group fix provided via js http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/ – justinavery Aug 08 '12 at 00:16

1 Answers1

7

I've included a link in the notes to help with that situation. Another way to fix it is use the code outlined in Jeremy Keith's "Orientation and scale" article.

<script type="text/javascript">
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
  for (i=0; i<metas.length; i++) {
    if (metas[i].name == "viewport") {
      metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
    }
  }
  document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
  for (i=0; i<metas.length; i++) {
    if (metas[i].name == "viewport") {
      metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
    }
  }
}
</script>

If you want to ignore your users rights and not allow them to zoom on their devices you could also set the meta viewport to the following which will solve the problem

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Matthew Rankin
  • 457,139
  • 39
  • 126
  • 163
justinavery
  • 2,596
  • 2
  • 19
  • 21
  • 3
    I'm not exactly sure if this is the "ultimate" fix, but simply removing the `initial-scale=1.0` seemed to fix the issue on iOS. Both articles mentioned the concept of allowing the user to zoom should they choose to do so. This still allows the option to zoom. I'm not sure if something was fixed in the newer versions of iOS (currently 5.1.1) on my iPhone. But it also seems to work just fine in Android 4.0.4. I haven't checked WP7. Is there any advantage to using the code above verses leaving off I'm not exactly sure if this is the "ultimate" fix, but simply removing the `initial-scale=1.0`? – Jeremy Miller Aug 09 '12 at 15:04
  • 2
    Removing the initial-scale=1.0 seems to fix the problem as well, how much simpler is that ;) There are some issues "The only real side effect on iOS is you don't get the full 480px of space while in landscape, but this is the same non-reflow behaviour the OS performs by default for regular desktop sites." but for the most part I think it's the better option. This has also been removed from the HTML5 Boilerplate (where that comment comes from). – justinavery Aug 09 '12 at 16:15
  • I on the other hand had to add initial-scale=1.0 to get decent zoom levels on my website. Removing it causes the zoom bug to trigger. – Jorre Oct 20 '13 at 21:25
  • Thanks for this. I have a fixed-width page with a content in a 1000px container, and an embedded video kept overflowing outside the container despite any style restrictions I put on the video or the container. Setting the viewport width to 1000px resolved this, but the page would then load zoomed in. This script resolves this behavior once it fires. – Taruc Aug 20 '15 at 14:50