Question

我正在努力建立一个快速响应的网站。不幸的是，我发现了一些问题。这是我的CSS的一部分：

header h1 {
    font-size: 2em;
}

@media all and (max-width: 1000px) {
    header h1 {
        text-align: center;
        display: block;
        font-size: 3em;
    }
}

问题在于，当我在Chrome（Android 4.3）的手机上打开此网站时，它启用了第二个选项（媒体查询），无论手机是水平放置还是垂直放置。我有Samssung Galaxy SIII LTE（GT-I9305），它有720 x 1280像素（4.80＆＃34;）306ppi屏幕。

所以我运行了这个jQuery代码：

$(window).resize(function() {
    alert( $(window).width() );
}

它向我展示了960px＆＃39;在水平和垂直视图中！即使这个元标记也没有帮助。

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

所以......我的问题是如何强制浏览器采用全尺寸设备？

// EDIT

我也试过了“max-device-width＆＃39; （没有结果）和

@media all and (orientation: portrait) {
    .
    .
    .
}

肖像选项工作得很好，但并不完全，因为当我点击某些输入或文本区域时（在垂直视图中），手机显示的键盘会导致切换回横向视图:(

抱歉我的英语不好。

Answer 1

听起来一切正常。

您有一组样式，最大宽度为1000px，手机为960px（小于1000）。

基本上1000px及以下的任何内容都会触发text-align：center，display：block，font-size：3em。

您是否确定了要使用RWD的确切宽度？也许尝试将max-width降低到959px？

移动宽度水平和垂直相同（RWD）

1 个答案: