1

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

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

我目前有以下元：

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

我发现了一个与此类似的问题：Media Queries - Landscape Mode on iPhone way too oversized，但是这个问题从未得到正确答案。唯一的答案确实提到了使用类似于我上面的标签的东西，但它只是：<meta name="viewport" content="width=device-width" />没有initial-scale=1.0- 这有什么不同吗？

我还想指出，这不会发生在 android 设备上，只有 iOS 设备。

有没有人以前解决过这个问题？

谢谢你的帮助！

4

1 回答 1

7

我在笔记中包含了一个链接来帮助解决这种情况。另一种解决方法是使用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" />
于 2012-08-08T05:25:00.843 回答