从横向到纵向如何解决Viewport问题
我一直在研究iPod和iPhone 4的Safari的视口问题，但是在这个问题上我找不到任何答案。 关于从纵向到横向的问题有几条线索，但从横向到纵向不是。 问题如下：
我以前从肖像到风景时，有正常的缩放问题，所以我添加了标签：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
这样就解决了这个问题。 现在，当我回到肖像模式，我所做的页面被拉伸，并呈现与增加的右边距。 这使得页面更宽，所以你必须扫到左边来获取页面的原始位置（认为它保留了新的“右边距”）。
对不起，如果有人已经回答了这个问题，但我似乎无法find任何回应这个问题。
让我知道是否需要一些额外的信息。 请记住这是我的第一个问题：
谢谢！
编辑：我正在运行iOS 6，并得到这个问题。 当我在iOS 5.1.1上运行我的页面时，它显示正常，所以它可能是以前修复的视口错误的新版本。
我想你想添加到您的CSS或样式块。 （ 这是在这个职位 ）
html { -webkit-text-size-adjust: none; /* Never autoresize text */ }
我通过jquery和css发现了一个解决方法。 我不知道它是如何有效的，但是这是一个适合我需求的选项。 基本上，将#orient id标记添加到您的body标记中，然后制作具有您遇到问题的设备的最大宽度的.ios6-mobile类。 在我的例子中，这是iPhone的大小运行ios6，所以我有一个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; }
希望这有助于某种方式！
这帮助我解决了同样的问题
@media (max-width:640px) and (orientation: landscape) { body {-webkit-text-size-adjust: 100%;} }
而对于视网膜显示器的错误
@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) { body {-webkit-text-size-adjust: 70%;} }