0

通过调整窗口大小和使用模拟器在浏览器中测试我的响应式网页时，一切都很好。现在我刚刚在我真正的 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元素没有。

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

4

2 回答 2

0

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

于 2013-02-02T20:00:36.603 回答
0

好的，我终于想通了！看到这个问题，这是我遇到的确切问题。
HTML5占位符文本在Safari中添加宽度导致滚动条和闪烁

于 2013-02-07T23:25:38.227 回答