背景缩放/放大在 Iphone4 和 5 模拟器中?使用纯HTML5和CSS3代码

Question

为iphone4和5开发HTML5应用程序。我有纹理丰富的背景。当我尝试添加此纹理图像时，它被缩放并且只有中心部分可见。图像大小为 640x960 和 640x1136，即使在最后添加@2x后，它仍然在缩放，我希望整个图像可见。请在下面找到代码-

法典：

 <div id="container" data-role="page" class="login_bg">
  <section class="main" data-role="none">
....
....
 </section>
</div>

.CSS：

@media all and (min-width: 640px) and (max-height: 960px){
    .login_bg {
        width:100%; 
        height:960px;
        background-image:url(../../img/[e-mail]);  
        background-repeat:no-repeat;
        background-position: top center;
        background-size:cover; 
    }
}

@media all and (min-width: 640px) and (max-height: 1136px){
.login_bg {
    width:100%; 
    height:1136px;
    background-image:url(../../img/[e-mail]);     
    background-repeat:no-repeat;
    background-position: top center;
    background-size:cover;
}
}

Answer 1

我已经发现了一个问题，只需要在下面为iPhone视网膜添加媒体查询-

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (min--moz-device-pixel-ratio: 1.3),
       only screen and (min-resolution: 200dpi)
  { ....

}

普通媒体查询，如 -

@media all 和 （最小宽度： 640px） 和 （最大高度： 960px）{}

或

@media all 和 （最小宽度： 640px） 和 （最大高度： 1136px）{}

行不通。

我浪费了 3 天来弄清楚这一点。希望这能帮助人们节省时间。:)