android - 移动宽度水平和垂直相同(RWD)

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) 打开这个网站时，它会启用第二个选项(媒体查询)，无论手机是水平还是垂直放置。我有三星 Galaxy SIII LTE (GT-I9305)，它有 720 x 1280 px (4.80") 306ppi 屏幕。

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

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

它在水平和垂直 View 中都显示为“960px”!即使这个元标记也无济于事。

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

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

//编辑

我也试过“max-device-width”(没有结果)和

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

纵向选项工作正常，但不完全，因为当我点击某些输入或文本区域(在垂直 View 中)时，手机显示键盘导致切换回横向 View :(

抱歉我的英语不好。

Answer 1

听起来一切正常。

您有一组要应用的最大宽度为 1000px 的样式，而您的手机是 960px(小于 1000)。

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

您是否已确定要应用 RWD 的确切宽度？也许尝试将最大宽度降低到 959px？