Question

我一直在研究iPod和iPhone 4的Safari中的视口问题，但我找不到任何关于此问题的答案。关于从纵向到横向的问题有几个主题，但不是从横向到纵向。问题如下：

从纵向到横向时，我曾经有过正常的缩放问题，所以我添加了标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这样就解决了这个问题。现在，当我回到纵向模式时，我制作的页面会被拉伸，并且会添加右边距。这会使页面变宽，因此您必须向左扫描才能获得页面的原始位置（认为它保留了新的“右边距”）。

很抱歉，如果有人已经回答了此问题，但我似乎无法找到对此问题的任何回复。

如果需要其他信息，请与我们联系。请记住这是我的第一个问题：/

谢谢！

编辑：我正在运行iOS 6，并且遇到了这个问题。当我在iOS 5.1.1上运行我的页面时，它正确显示，因此它可能是以前修复过的视口错误的新版本。

Answer 1

我想你想把它添加到CSS或样式块中。（It was in this post）

  html {
      -webkit-text-size-adjust: none; /* Never autoresize text */
  }

Answer 2

我通过jquery和css找到了解决方法。我不知道它有多有效，但它是一个适合我需要的选项。基本上，将#orient id标记添加到您的body标记，然后创建具有您遇到问题的设备的最大宽度的.ios6-mobile类。在我的实例中，它是针对运行ios6的iphone大小，所以我的最大宽度为320px。这是jquery代码。

的jQuery

window.addEventListener("orientationchange", function() {
  if(window.orientation == 0){
      $("#orient").addClass("io6-mobile");
  } else if (window.orientation !== 0){
      $("#orient").removeClass("io6-mobile");
  }
}, false);

CSS

#orient { /* Don't need any code. Just a helpful ID to pass to jQuery */ }
.ios6-mobile { max-width:320px /* change the width to whatever size your device is */; overflow:hidden; }

希望这在某种程度上有所帮助！

Answer 3

这有助于我解决同样的问题

@media (max-width:640px) and (orientation: landscape) {
    body {-webkit-text-size-adjust: 100%;}
}

对于Retina显示错误

@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
    body {-webkit-text-size-adjust: 70%;}
}

从横向到纵向时如何修复视口问题

3 个答案: