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

我正在努力建立一个响应性强的网站。不幸的是，我注意到了一些问题。以下是我的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 px（4.80”）306ppi屏幕

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

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

它在水平和垂直视图中都显示了“960px”！即使这个元标记也没有帮助

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

“纵向”选项工作正常，但并不完全正常，因为当我点击某些输入或文本区域（在垂直视图中）时，手机会显示一个键盘，导致切换回横向视图：(

---

对不起，我的英语不好。

听起来一切都正常

您有一套应用于最大宽度为1000px的样式，而您的手机是960px（小于1000）

基本上，1000px及以下的任何东西都会触发文本对齐：居中、显示：块、字体大小：3em

---

您确定了要应用RWD的确切宽度了吗？也许可以尝试将最大宽度降低到959px？

是的，我的错误。但问题是javascript在横向方向上读取设备的宽度为960px，在纵向方向上读取设备的宽度为960px……但我的屏幕不是方形的LOL。看起来媒体查询正在执行此操作同样，因为max width 959px不能解决我的问题。我在Mozilla和本机Android浏览器上测试过它，它们的行为都是一样的。是的，这很奇怪。媒体查询总是需要我几次尝试才能得到正确的公式。看看这篇文章，它有很多与它们相关的设备方便的查询：我解决了我的问题：）我使用了，然后媒体查询设备的宽度是360px（垂直）和640px（水平），所以一切都正常。

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