gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 12:26:01 25 4
gpt4 key购买 nike

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

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

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

我尝试用 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.pnglow.png 放两张完全不同的图片——比如猫和狗——那么它是否有效就很清楚了。

关于javascript - Srcset 似乎不适用于 iOS7 中的移动 safari?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21164669/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com