iphone - 在 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/Bg_960@2x.png);  
        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/Bg_1136@2x.png);     
    background-repeat:no-repeat;
    background-position: top center;
    background-size:cover;
}

}

Answer 1

我发现了一个问题，只需要在下面添加 Iphone Retina 的媒体查询-

@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 和(最小宽度:640 像素)和(最大高度:960 像素){}

或

@media all 和(最小宽度:640 像素)和(最大高度:1136 像素){}

不会工作。

我浪费了 3 天时间来解决这个问题。希望这会帮助人们节省时间。 :)