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

Question

Apple 刚刚发布了他们新的 iOS7 操作系统，但它导致我的视​​网膜图标媒体查询出现问题。背景大小属性似乎被忽略了。示例图片在这里:http://imgur.com/R3OgFgN

图像替换在运行 iOS6 及以下版本(任何浏览器)的 iPhone 4、4s、5 上完美运行。 iOS7 浏览器似乎抓取高分辨率图像但忽略背景大小属性:

@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 在运行媒体查询时重置了背景大小属性。诀窍是使用精确的像素尺寸或像这样使用 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;
        }

N.b - 我还发现包含 !important 标签可确保所有视网膜设备正确读取查询，包括三星 S3 和 S4。享受吧。