移动 Safari - 从水平视图变为垂直视图 - 身体的奇怪行为答案

【问题标题】：Mobile Safari - changing from horizontal to vertical view - strange behavior of body移动 Safari - 从水平视图变为垂直视图 - 身体的奇怪行为
【发布时间】：2013-02-08 07:25:38
【问题描述】：

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

当以垂直视图加载页面时，一切都很好，切换到水平视图也没有问题。但是当我再次转动手机使其再次进入垂直视图时，发生了一些奇怪的事情。显示垂直版本，但似乎 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 元素没有。

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

【问题讨论】：

标签： html css mobile-safari responsive-design

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

【讨论】：

啊抱歉，我太愚蠢了。我忘了提到我已经在 HTML 头部有<meta name="viewport" content="width=device-width, initial-scale=1.0">。我只是用orientation:portrait 和orientation:landscape 尝试过，但没有任何运气。请查看我对初始帖子所做的修改。
@Sven 这应该适用于 100%，试试 :)
好吧，使用<meta name="viewport" content="width=device-width"> 它可以工作，但是一旦我添加, initial-scale=1 它就会中断。你知道为什么吗？我也试过用逗号而不是分号。
@sven 这对我有用
谢谢，但对我来说这行不通。您对body 和html 元素有任何特殊的CSS 声明吗？

【解决方案2】：

好吧，我终于想通了！看到这个问题，这正是我遇到的问题。
HTML5 Placeholder Text Adding Width In Safari Causing Scrollbars And Flickering

【讨论】：