Question

因此，当我在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设备上。

之前有人已经解决了这个问题吗？

感谢您的帮助！

Answer 1

我在笔记中添加了一个链接来帮助解决这种情况。另一种解决方法是使用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>

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

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

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

1 个答案: