对于网站上的 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 中移除以支持替代方案?
最佳答案
更新: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
放两张完全不同的图片——比如猫和狗——那么它是否有效就很清楚了。
关于javascript - Srcset 似乎不适用于 iOS7 中的移动 safari?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21164669/