Srcset 在 iOS7 的移动 Safari 上似乎无法工作？

Question

Srcset 在 iOS7 的移动 Safari 上似乎无法工作？

4

在网站上使用以下图像标签来显示Logo：

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

尽管多篇文章表明它可以在Webkit和移动版Safari上使用，但在iOS7 iPhone和iPad mini retina的移动版Safari上无法正常工作：

我尝试使用JavaScript检查srcset，但没有成功，只得到一个确认为false的警告：

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

isSrcsetImplemented();

为什么对我不起作用？他们是否在Webkit中使用替代方案而将其删除了？

- jeroen

目前根据http://caniuse.com/#feat=srcset的数据，全球普及率约为36％，但这是误导性的，因为现在基本上只有Chrome占大多数，而且主要是桌面端。幸运的是，iOS用户更新速度很快，再过一个月或两个月，随着iOS8的推出，这个数字应该会大幅增加。 - Simon_Weaver

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon_Weaver · Accepted Answer

更新：9/14/14

现在在iOS8中得到支持，该版本今天已经发布，因此很快会有非常好的普及。

目前Safari尚未支持，无论是移动版还是桌面版。

虽然几个月前就宣布将支持webkit，但直到2014年2月才在Chrome（桌面版）中刚刚推出。它实际上在下一个公共版本（v34）中，截至4/6/14，这是当前的测试版。因此，当大多数人阅读本文时，它应该可以在桌面版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

这将在所有移动设备和桌面上立即提供视网膜图形，浏览器会为低分辨率屏幕进行缩放。

当移动Safari引入srcset时，非视网膜iPad将自动回退到low.png以节省带宽（谁知道可能苹果甚至会包括一个设置来仅下载低分辨率图像）。

在桌面Chrome（v.34）和其他浏览器（最终），浏览器基本上会忽略src，如果您有高分辨率屏幕，则会得到high.png，如果您具有标准分辨率，则会得到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都将无条件获取高分辨率图像-直到苹果更新Safari，此时非视网膜iPad将获得低分辨率版本。

幸运的是，我设计的网站将在一个月或两个月后发布，我希望Safari在几个月内更新，这样就可以保证未来的可靠性。

提示：为了测试high.png和low.png，只需为high.png和low.png放置两个完全不同的图像-像猫和狗一样-然后就可以清楚地看到它是否起作用。