1

包含以下 CSS 的效果是什么？最初这似乎是一个愚蠢的问题，但请耐心等待。我有以下页面。没什么太复杂的，只是顶部有一个固定的标题，h1 在标题 div 内水平居中。在浏览器中，这可以完美运行。但是，这将在 phonegap 2.9.0 应用程序中使用。

在 nexus 4 上，当屏幕旋转时，h1 不再水平居中，除非包含“来自 js 的方向”css。但我什至在我的 HTML 页面中的 @media 选择器中根本没有这个类。诚然，我从 jquery mobile 的 css 文件中复制了方向 css，但只是为了了解他们如何能够让他们的 h1 始终居中，即使在设备方向发生变化时也是如此。我没有使用jquery mobile。

有人可以解释这个谜吗？

<!DOCTYPE html>
<html>
    <head>
        <title>&nbsp;</title>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
        <style>
/*CSS WITH THE CORRECTING EFFECT*/
@media screen and (orientation: portrait){
.nonExistantClass {}
}
/* OR THIS ONE! */
@media screen and (orientation: landscape){
.anotherNonExistantClass {}
}
/*END CSS WITH THE CORRECTING EFFECT*/

.header h1{
    font-size:1.4em;
    margin: 0 30%;
}
.header {
    left: 0;
    right: 0;
    width: 100%;
    top:0;
    position: fixed;
    z-index: 1000;
    background:black;
    color:white;
    height:2.4em;
    line-height:2.4em;
    text-align:center;
}
        </style>
    </head>
    <body>
        <div>
            <div class="header">
                <h1>Title</h1>
            </div>
        </div>
    </body>
</html>

更新：我已经缩小了一点。我最初的问题是关于 ui-mobile 和 ui-page 类。然而，与之前更改类名的相同 CSS 具有完全相同的效果。

此外，我只需要两个 @media 选择器之一来展示上述行为。我已经更新了我的问题。

4

1 回答 1

0

除非有人能纠正我，否则我的回答是，这只是 phonegap 或其在 Android 上的实现中的一个错误，并且通过包含其中一个媒体选择器，我强制应用程序的浏览器视图以某种方式进行宽度计算在任何情况下都应该这样做。

我想知道 jQuery 背后的人是否知道这一点，或者只是巧合地有 CSS 来纠正这个错误......

于 2013-08-06T07:22:35.113 回答