Iphone4 和 5 模拟器中的背景缩放/放大？使用纯 HTML5 和 CSS3 代码答案

【问题标题】：Background scaled/magnified in Iphone4 and 5 simulator ? Using plain HTML5 and CSS3 codeIphone4 和 5 模拟器中的背景缩放/放大？使用纯 HTML5 和 CSS3 代码
【发布时间】：2013-10-28 07:15:42
【问题描述】：

为 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;
}

}

【问题讨论】：

标签： iphone html css media-queries

【解决方案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 and (min-width: 640px) and (max-height: 960px){}

或

@media all and (min-width: 640px) and (max-height: 1136px){}

不会工作。

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

【讨论】：