iOS zooming issue on responsive site from portrait

问题:

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!

回答1:

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