Question

对于网站上的徽标，使用以下图像标记：

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

对于我在iOS7 iPhone和iPad mini视网膜上进行移动游猎时，它不适合我，尽管多篇文章表明它可以在Webkit和移动游猎中使用：

我尝试使用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），这是4/6/14的当前测试版。因此，当大多数人阅读此内容时，它应该可以在destktop 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以节省带宽（谁知道Apple甚至可能包含仅下载低分辨率图像的设置）。 / p>

在桌面Chrome浏览器（第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都将无条件地获得高分辨率图像 - 直到Apple更新Safari，此时非视网膜iPad将获得低分辨率版本。

幸运的是，我正在设计的网站将不会发布一两个月，我希望Safari会在几个月后更新，这使我们愿意采取一种面向未来的赌博。< / p>

提示：对于测试high.png和low.png，只需为high.png和low.png放置两个完全不同的图像 - 就像一只猫和一只狗 - 然后它会清楚它是否正在工作或不

Srcset似乎没有在iOS7上进行移动游猎？

1 个答案:

更新：2014年9月14日