javascript - Srcset 似乎不适用于 iOS7 中的移动 safari？

Question

对于网站上的 Logo ，使用以下图像标签:

<img src="images/logo.png" srcset="images/logo2.png 2x"/>

它不适用于 iOS7 iPhone 和 iPad mini retina 上的移动 safari，尽管多篇文章表明它适用于 Webkit 和移动 safari:

• Improved support for high-resolution displays with the srcset image attribute
• WebKit Has Implemented srcset, And It’s A Good Thing
• High DPI Images for Variable Pixel Densities

我尝试用 JavaScript 检查 srcset，但无济于事，但确实收到了确认 false 警报:

function isSrcsetImplemented() {
  var img = new Image();
  alert('srcset' in img);
}

isSrcsetImplemented();

为什么它对我不起作用？他们是否将其从 Webkit 中移除以支持替代方案？

Answer 1

更新:2014 年 9 月 14 日

现已在今天向公众发布的 iOS8 中提供支持，因此预计很快就会有很好的普及。

---

Safari 尚不支持，无论是移动设备还是桌面设备。

虽然它是几个月前宣布用于 webkit 的 only just been introduced in Chrome (桌面)截至 2014 年 2 月。它实际上在下一个公开版本 (v34) 中，这是截至 2014 年 4 月 6 日的当前测试版。因此，当大多数人阅读本文时，它应该可以在桌面 Chrome 上进行测试。

我目前的策略/建议是这样做:

<img src="images/high.png" 
     srcset="images/low.png 1x,images/high.png 2x" width="100" height="100"/>

在哪里

 high.png = 200x200
 low.png = 100x100

这将在所有移动设备和桌面设备上立即提供 Retina 图形，由浏览器缩小以适应较低分辨率的屏幕。

当移动版 safari 引入 srcset 时，非视网膜 ipad 可以自动恢复为 low.png 以节省带宽(谁知道苹果甚至可能会包含一个设置来仅下载低分辨率图像)。

在桌面版 Chrome (v.34) 和其他浏览器(最终)上，浏览器基本上会忽略 src，如果您有高分辨率屏幕和 low.png(如果您有标准分辨率)。

此外，即使在“常规”屏幕上，如果您的缩放级别高于 1.0(当您访问页面或刷新时)，它也会为您提供 high.png 文件。这是一个很好的接触，也是使用 srcset 而不是媒体查询或 javascript 替换技术的一个很好的理由。

---

进阶版(我今天的真实推荐):

这有一个明显的问题，因为从今天开始，您将为每个人提供高分辨率图像 - 直到 srcset 支持得到改善，这可能需要一段时间。

所以我选择了以下服务器端折衷方案，(假设我的高分辨率图像的主要消费者是视网膜 iPad):

// server side(pseudocode)- (I made an ASP.NET MVC helper for this)
@if (Request.UserAgent.Contains("iPad"))) 
{

<img src="images/high.png" 
     srcset="images/low.png 1x,images/high.png 2x" width="100" height="100"/>

} 
else {

<img src="images/low.png" 
     srcset="images/low.png 1x,images/high.png 2x" width="100" height="100"/>

}

任何拥有 srcset 支持的人都将始终获得合适的版本。桌面用户(Chrome v34 除外)将获得标准分辨率图像。所有 iPad 都将无条件获得高分辨率图像 - 直到 Apple 更新 Safari，届时非视网膜 iPad 将获得低分辨率版本。

幸运的是，我正在设计的网站一两个月内不会发布，我希望 Safari 能在几个月内更新，这是我愿意进行的面向 future 的赌博。

提示:为了测试 high.png 和 low.png，只需为 high.png 和 low.png 放两张完全不同的图片——比如猫和狗——那么它是否有效就很清楚了。