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

Question

对于网站上的徽标,使用以下图像标记:

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

虽然有多篇文章建议它可以在Webkit和移动游戏中使用,但它对我在iOS7 iPhone和iPad mini视频网络上的手机游戏中无效.

• 使用srcset图像属性改进了对高分辨率显示的支持
• WebKit已经实现了srcset,这是一件好事
• 可变像素密度的高DPI图像

我尝试srcset用JavaScript 检查,但没有用,但确实得到了确认false警报:

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

isSrcsetImplemented();

为什么它对我不起作用？他们是否将其从Webkit中取出而取而代之？

Answer 1

更新:2014年9月14日

现在在今天向公众发布的iOS8中得到支持,因此很快就会有很好的渗透率.

尚未支持Safari,移动或桌面版.

尽管几个月前它已经在 webkit上宣布,但它刚刚在 2014年2月的Chrome(桌面版)中推出.它实际上是在下一个公开发布(v34),这是当前的测试版,截至2014年4月6日.因此,当大多数人阅读此内容时,它应该可以在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自动以节省带宽(谁知道也许苹果会,甚至还包括一个设置只下载低分辨率图像).

在桌面版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能在几个月内更新,这使得这是一个我愿意采取的面向未来的赌博.

提示:测试high.png和low.png只是把两个完全不同的图片high.png和low.png-像一只猫和一只狗-那么,如果它的工作或没有这将是清楚的.