5

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 上测试。

有没有人遇到过这个问题，如果有，您是如何解决的？

4

3 回答 3

10

我解决了！事实证明，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;
        }

注意 - 我还发现包含!important标记可确保所有视网膜设备都能正确读取查询，包括三星 S3 和 S4。享受。

于 2013-09-24T05:45:15.610 回答
7

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

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;

于 2013-10-06T18:25:10.380 回答
2

因为示例是图像。我无法检查代码。

您可以尝试以下选项：

  1. 如果 div 的宽度和高度是固定的。您可以为图像设置固定的宽度和高度。通常，视网膜显示器也需要“最小设备像素比”来进行高分辨率显示。

例如

@media (-webkit-min-device-pixel-ratio: 2) 
       and (min-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;
  width: 200px;
  height: 100px;
}

或者如果 div 不固定。

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

试试这是否可以解决您的问题。

干杯!

于 2013-09-23T01:13:29.733 回答