响应式网站上的iOS缩放问题，从纵向到横向断点 [英] iOS zooming issue on responsive site from portrait to landscape break points

问题描述

所以，当我的iOS设备上从纵向模式切换到横向模式时，我的响应网站有一个奇怪的问题。您可以在这里查看实际网站： http://www.aptify.com

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

如果您以纵向模式查看网站，请旋转放大的iOS设备。

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

我目前有以下元：

< meta name =viewportcontent =width = device-width; initial-scale = 1.0/>

我发现了一个类似这样的问题：媒体查询 - 风景模式在iPhone的方式过大，但问题从来没有得到一个正确的答案。唯一的答案没有提到使用类似我上面的标签，但它只是：< meta name =viewportcontent =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?

不会发生在Android设备上，只有iOS设备。

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

任何人都有并修复此问题吗？

Anyone have and fixed this issue before?

感谢您的帮助！

推荐答案

我在备注中包含了一个链接，以帮助解决这种情况。另一种解决方法是使用 Jeremy Keith的方向和缩放文章中所述的代码。 p>

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

这篇关于响应式网站上的iOS缩放问题，从纵向到横向断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！