4

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

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

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

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

抱歉，如果有人已经回答了这个问题，但我似乎找不到任何对此问题的回应。

让我知道是否需要一些额外的信息。请记住这是我的第一个问题：/

谢谢！

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

4

3 回答 3

3

我认为您想将此添加到您的 CSS 或样式块中。（在这个帖子里）

  html {
      -webkit-text-size-adjust: none; /* Never autoresize text */
  }
于 2012-10-02T19:29:57.610 回答
2

我通过 jquery 和 css 找到了解决方法。我不知道它的效果如何，但它是满足我需求的一种选择。基本上，将#orient id 标签添加到您的body 标签中，然后使 .ios6-mobile 类具有您遇到问题的设备的最大宽度。在我的例子中，它适用于运行 ios6 的 iphone 尺寸，所以我的最大宽度为 320 像素。这是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; }

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

于 2013-07-25T19:02:18.470 回答
1

这帮助我解决了同样的问题

@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%;}
}
于 2012-10-23T08:42:46.483 回答