电话应用程序中以下CSS的效果如何？

包含以下CSS的效果如何？最初这可能看起来像一个愚蠢的问题，但忍耐着我。我有以下页面。没有太复杂的东西，只有一个固定的头部，h1在头部div内水平居中。在浏览器中，这是完美的。不过，这是在手机2.9.0应用程序内部使用。电话应用程序中以下CSS的效果如何？

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

有人可以解释这个谜吗？

<!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>

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

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

来源

2013-08-06 user453441

我的答案，除非有人能够纠正我，这是这只是一个phonegap中的错误或在Android上的实现，并通过包括这些媒体选择器之一，我迫使应用程序的浏览器视图做某事在任何情况下应该做的宽度计算。

我不知道jQuery背后的人是否知道这一点，或者恰巧碰巧有CSS来纠正错误...

来源

2013-08-06 07:22:35 user453441

电话应用程序中以下CSS的效果如何？

回答

相关问题