logo标签列表

从横屏切换到竖屏时如何解决视口问题

iosviewportipodiphone-4
4
我一直在研究iPod和iPhone 4的Safari中的viewport问题，但是我找不到任何关于这个问题的答案。有几个帖子讨论从竖屏到横屏的问题，但没有从横屏到竖屏的问题。 问题如下： 我曾经遇到从竖屏到横屏的正常缩放问题，所以我添加了标签： ``` ``` 这样就修复了该问题。 现在，当我回到竖屏模式时，我制作的页面会被拉伸并呈现出额外的右边距。这使得页面变宽，因此您必须向左滑动才能获得页面的原始位置（尽管保留了新的“右边距”）。 很抱歉如果已经有人回答过这个问题，但我似乎找不到任何关于此问题的回应。 如果需要其他信息，请告诉我。请记住这是我的第一个问题：/ 谢谢！ 编辑：我正在运行iOS 6，并且遇到了这个问题。当我在iOS 5.1.1上运行我的页面时，它显示正确，因此这可能是之前修复的viewport漏洞的新版本。
3个回答
3

我认为你想将这个添加到你的CSS或样式块中。（这篇文章中有提到）

  html {
      -webkit-text-size-adjust: none; /* Never autoresize text */
  }
我刚刚尝试在我的CSS样式表中添加这行，但它并没有解决问题。 - Alfie Barboza
你正在使用<html>和</html>吗？ - Mike M
是的，<!DOCTYPE html><html><head>在我的HTML页面的第一行，我在底部关闭它。 - Alfie Barboza
是的，我考虑过这个问题，但我的应用程序包含输入字段，用户在其中输入个人信息，因此如果重新加载页面，我想我会丢失这些字段中输入的信息。 - Alfie Barboza
2
我找到了一个通过jquery和css的解决方法。我不知道它有多有效，但这是一个适合我的需求的选项。基本上，将#orient id标签添加到您的body标签中，然后使具有设备最大宽度的.ios6-mobile类出现问题。在我的情况下，这是针对运行ios6的iphone尺寸，因此我的最大宽度为320px。以下是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; }

希望这能在某种程度上帮到您！
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%;}
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接