从纵向到横向断点的响应式网站上的iOS缩放问题

Question

因此,当我在iOS设备上从纵向模式切换到横向模式时,我的响应式网站出现了一个奇怪的问题.您可以在这里查看实时网站:http://www.aptify.com

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

我目前有以下元数据:

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

我发现了一个与此类似的问题:媒体查询 - iPhone上的风景模式太过分了,但问题从来没有给出正确的答案.唯一的答案确实提到了使用与我上面的标签类似的东西,但它只是:<meta name="viewport" content="width=device-width" />没有initial-scale=1.0- 这有什么不同？

我还要注意,这不会发生在Android设备上,只有iOS设备上.

以前有人修过这个问题吗？

谢谢你的帮助!

Answer 1

我在笔记中包含了一个链接来帮助解决这种情况.修复它的另一种方法是使用Jeremy Keith的"Orientation and scale"文章中概述的代码.

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

如果您想忽略您的用户权限而不允许他们放大他们的设备,您还可以将元视口设置为以下将解决问题

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />