在Apple Watch上如何让你的图片响应式

时间 2019-11-17

标签 apple watch 如何让你图片响应栏目 MacBook 繁體版

原文原文链接

原文做者：Eric

译者：UC 国际研发 Jothy前端

写在最前：欢迎你来到“UC国际技术”公众号，咱们将为你们提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。

目前 Apple Watch 也有浏览器了。 Apple 创造了一类在 web 中通用的极小视图窗口。 iPhone WebKit 给咱们带来了<meta name =“viewport” content =“width = device-width”>; 🍎而 Watch WebKit 创造了 <meta name =“disabled-adaptations” content =“watch”>。

2018 年的 <meta>-magic 与 2007 年的功能相同。除非你在提早声音你考虑的是一英寸宽的屏幕，不然 Apple 会假设你是一个更大更常见的视图窗口，并缩小视图。

我比较好奇它的实现细节及其对响应式图像的处理方式，因此我进行了一个测试。最近，我终于说服某人（个人老板，hi Colin）在他的 WatchOS 5 上进行测试，结果颇有意思，咱们一块儿来看看。

个人指望是，即便没有新的 meta 声明，Apple Watch 也能响应式地准确判断 DPR。个人预期 DPR 是这样的：

但现实倒是这样的：

Apple Watch 会模拟 320 像素 x 2 = 640 实际像素宽的视图窗口（仍是精确的物理像素！），对屏幕上的其它的东西进行缩放以适应该窗口。

那么响应式图像的实际意义是什么？拿这个 <img> 来讲：

默认状况下，即便用户须要的只是 tiny.jpg 的分辨率，Apple Watches 仍是会选择 small.jpg。好烧流量啊🔥！

要避免这种状况，你得在 <head> 中加上这段神奇的文字：

加上以后，DPR 是这样的：

这将使响应式图像更高效地作选择，而且强制确保布局基于 136 像素宽的视图窗口。

艺术感

我猜大多数响应式布局在 136 像素时表现不佳。你知道还有什么可能经不起这种缩放吗？没错，就是图片！在极小的物理尺寸下，许多东西都将变得很是小，很是不清晰：

所以，在设计小屏幕时，请考虑一下艺术感。

…像这样 🤣。对了！你可使用 Cloudinary 等工具自动进行图像识别和放大。

小贴士 🎀

我认为（？）Apple Watch WebKit 的 uasge 数据目前仅仅只是一个舍入错误，但若是推进响应式设计的极限真的很重要，Apple Watch 会给出一个这么作的理由。

总结：

试着把你的布局调整为 136 像素宽
在你的 <img> 的 src 集合中使用 300w-ish 的资源
考虑艺术感以保持图像清晰可辨
使用神奇的 <meta>

⌚️🕸🤘

英文原文：

https://ericportis.com/posts/2018/respimg-apple-watch/

好文推荐：

Hummingbird: 在Web上运行Flutter应用

“UC国际技术”致力于与你共享高质量的技术文章

欢迎关注咱们的公众号、将文章分享给你的好友

相关文章

相关标签/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<