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

Posted 2023-03-06

【中文标题】iOS7 忽略视网膜 css 媒体查询 - 背景大小

【英文标题】：iOS7 ignoring retina css media queries - background-size

【发布时间】：2013-09-27 19:45:11

【问题描述】：

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/[e-mail]) no-repeat 0 0 !important;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;

它的作用；

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

它没有做什么；

使背景图片适合 div 元素的大小。

在 iOS7 Safari 和 Chrome 上测试。

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

【参考方案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/[e-mail]) no-repeat 0 0 !important;
          background-size: 100% !important;
          width: 30px;
          height: 40px;
        

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

【参考方案2】：

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

background: url(../img/2x/[e-mail]) no-repeat 0 0 !important;

所以浏览器将其视为

background-image:url(../img/2x/[e-mail]) !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; 覆盖

【讨论】：

你完全正确。发生了许多 CSS 冲突，但我希望这可以帮助其他人解决类似的无知问题；）

这对我来说不是完整的解决方案，但非常感谢，因为它帮助我解决了我的问题！写一般的“背景：;”属性根本不起作用，但是一旦我写了“背景图像”、“背景位置”、“背景大小”之类的每个属性，它就起作用了！！

【参考方案3】：

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

您可以尝试以下选项：

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

例如

@media (-webkit-min-device-pixel-ratio: 2) 
       and (min-device-pixel-ratio: 2)
.b .logo
  background: url(../img/2x/[e-mail]) 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/[e-mail]) no-repeat 0 0 !important;
  background-size: contain;

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

干杯！

【讨论】：

您的媒体查询（包括“min-deivce-pixel-ratio”）不起作用，但是我修复了它，在两个查询之间加了一个逗号。它仍然无法识别这两种情况下的 background-size 属性。我会继续努力解决这个问题并告诉你我的进展情况

如果 background-size 是固定的，你可以设置 background-size 为固定宽度，例如'背景尺寸：200px'