从横向到纵向时如何解决视口问题答案

【问题标题】：how to fix Viewport issue when going from landscape to portrait从横向到纵向时如何解决视口问题
【发布时间】：2012-10-02 17:28:20
【问题描述】：

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

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

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

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

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

如果需要一些其他信息，请告诉我。请记住，这是我的第一个问题：/

谢谢！

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

【问题讨论】：

标签： ios viewport ipod iphone-4

【解决方案1】：

我认为您想将此添加到您的 CSS 或样式块中。 (It was in this post)

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

【讨论】：

我刚刚尝试在我的 CSS 表中添加这一行，但它没有修复它。
你在使用和
是的，在我的 html 页面的第一行，我在底部关闭它。
是的，我想过，问题是我正在制作的应用程序包含输入字段，用户输入个人信息，所以如果我重新加载页面，我想我会输在这些字段中输入的信息。

【解决方案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; }

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

【讨论】：

【解决方案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%;}
}

【讨论】：