- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
对于网站上的 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 中移除以支持替代方案?
最佳答案
现已在今天向公众发布的 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/
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时,都会触发一些断点,并且我会被重定向到“源代码”选项卡,并显示消息“调试器已暂停”。问题是我没有设置任何断点,至少是有意的,这
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。 最佳答案 Readability 项目对 chrome 和
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的,似乎在大多数浏览器中都能正常工作,除了 Safari(特别是在 iOS 上)。 我在控制台中遇到的错误是:跨源重定向被跨源资源
如何在 Safari 中为网页添加 IE 等页面转换效果? 最佳答案 你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到,除了 safari,它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢? 示例 http://jsfiddle.net/v
我找遍了这个问题的解决方案,但似乎没有任何效果,如果可以避免的话,我真的不想使用 hack。 当我将 line-height 设置为垂直居中时,我的导航栏在任何地方都居中,但在 safari 中,它的
在输入字段中输入时,safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。 我正在运行 Safari 版本 11.0.1 重现 fiddle : https
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。 这听起来很容易,但事实并非如此! 我需要打开 safari,然后以全屏模式打开谷歌,然后隐藏工具栏。 这将是以下示例的等效项,但对于
嗨, friend 们,我开发了一个 safari 扩展并且也能够构建它。 但是当我尝试安装它时,会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
我想将使用的扩展版本报告给服务。 有没有办法从扩展中读取扩展版本号? 最佳答案 您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。 是否有一个 API 可以让我实现这一点,如果有,它是什么? 最佳答案 您的扩展程序拥有的任何工具
Safari 有一项“功能”,可以在您输入网址时预加载页面。 现在对于大多数用户来说,这确实是一项功能,可以加快页面加载速度。但是对于 Web 开发人员来说,它可能会带来麻烦 - 特别是当它自动加载您
我们有一个正在开发中的 PHP Web 应用程序,它不应该被公众访问(但),但我们不想实现自定义解决方案来防止这种情况发生,因此我们求助于 HTTP 基本身份验证,它通常工作正常但有是 iPhone
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时,该值对于屏幕来说太长了,复制该行只会复制该值的可见部分。有没有办法看到整条线? 最佳答
出于开发目的,我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。 在 Chrome 中,这可以通过使用标志 --disable-web-security 启动来完成。 Safa
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。 在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中,我们将右键单击鼠标按钮或按功能键 F
我有兴趣针对 Safari 浏览器进行一些开发,但我不确定它是否是开源项目?我知道 webkit 是开源的,但这并不意味着浏览器是开源的。 我已经给苹果发了电子邮件,但他们的回复不是很及时,所以我想知
我有一个正确的/etc/hosts 文件,其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l
我是一名优秀的程序员,十分优秀!