0

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

}
4

1 回答 1

0

我发现了一个问题，只需要在下面添加 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 天时间来解决这个问题。希望这将有助于人们节省时间。:)

于 2013-10-21T02:31:46.423 回答