html - Mobile Safari - 从水平 View 变为垂直 View - body 的奇怪行为

Question

通过调整窗口大小和使用模拟器在浏览器中测试我的响应式网页时，一切正常。现在我刚刚在我真正的 iPhone 4S 上测试了这个页面，结果很奇怪。

在垂直 View 加载页面时，一切都很好，切换到水平 View 也没有问题。但是当我再次转动手机使其再次进入垂直 View 时，奇怪的事情发生了。显示了垂直版本，但似乎 body没有正确调整大小。我在右边有一个很大的空白区域和一个垂直滚动条，而网页上的元素显示在左边。截图:

垂直 #1

水平

垂直 #2

这是我身上的CSS代码(注意:我还在做那个元素，所以颜色和字体只是暂时这样写的):

body {
    margin: 0;
    background-color: grey;
    color: black;
    font-family: Georgia, serif;
    line-height: 1.5;
    background-image: url(../img/bg.png);
}

我还使用基于 em 的媒体查询，例如:

@media only screen and (min-width: 30em) {
   /* Stuff */
}

在媒体查询中，我没有对正文进行任何更改。

在我的 HTML 文件的头部

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

一些调试告诉我，body元素调整大小正确，但 html元素没有。

你知道是什么导致了这个问题吗？

Answer 1

HTML:

<meta name="viewport" content="initial-scale=1.0">

尝试添加 CSS:

@media only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait)

和，

@media only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape),
only screen and (min-device-pixel-ratio : 2)  and (orientation:landscape)

用于视网膜显示器。

也许这个链接可以帮到你https://developer.mozilla.org/en-US/docs/CSS/Media_queries