iOS7忽略视网膜css媒体查询 - 背景大小

Question

Apple刚刚发布了他们的新iOS7操作系统,但它导致我的视​​网膜图标媒体查询出现问题.看来background-size属性被忽略了.示例图片如下:http://imgur.com/R3OgFgN

图像替换适用于运行iOS6及更低版本(任何浏览器)的iPhone 4,4s,5.iOS7浏览器似乎抓住了高分辨率图像但忽略了background-size属性:

@media (-webkit-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
}

它做了什么;

• 用@ 2x图像替换原始图像

什么不做;

• 使背景图像适合div元素大小.

在iOS7 Safari和Chrome上测试过.

有没有人有这个问题,如果是这样,你是如何设法解决它的？

Answer 1

我解决了!事实证明,iOS7在运行媒体查询时会重置background-size属性.诀窍是指定具有精确像素尺寸的背景尺寸,或者像这样指定100%的值;

@media
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 2dppx){
        .logo{
          background: url(../img/2x/logo@2x.png) no-repeat 0 0 !important;
          background-size: 100% !important;
          width: 30px;
          height: 40px;
        }

Nb - 我还发现包含!important标签确保所有视网膜设备都能正确读取查询,包括三星S3和S4.请享用.

Answer 2

这不是错误的行为.这是你的错.您在此处设置所有背景属性:

background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;

所以浏览器将其视为

background-image:url(../img/2x/m-yellloh-logo@2x.png) !important 
background-position:0 0 !important 
background-repeat:no-repeat !important 
background-size:auto auto !important 
and so on

因此你的最后一行background-size: 100%;被覆盖了background-size:auto auto !important;