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

简介: 我很好奇实现细节及其对响应式图像的影响,所以我进行了一个测试。 最近,我终于说服某人(我的老板,hi Colin)运行 WatchOS 5 测试,结果很有意思。

原文作者:Eric

译者:UC 国际研发 Jothy

----

目前 Apple Watch 预装了一款浏览器。 Apple 在这方面有一些经验,它创造了一类在 web 中通用的极小视图窗口。 iPhone WebKit 给我们带来了; 而 Watch WebKit 创造了 。

2018 年的 -magic 与 2007 年的功能相同。 除非你告诉 Apple 你考虑的是一英寸宽的屏幕,否则他们会假设你是一个更大,更常见的视口,并缩小视图。

我很好奇实现细节及其对响应式图像的影响,所以我进行了一个测试。 最近,我终于说服某人(我的老板,hi Colin)运行 WatchOS 5 测试,结果很有意思。

我希望即使没有新的 meta 声明,Apple Watch 也能响应式地准确报告 DPR。 我希望他们能像这样报告 DPR:

image.png

但是他们没有。 这才是现实:

image.png

每块手表都模拟 320 像素 x 2 = 640 实际像素宽的视图窗口 - 精确的物理像素!- 并缩小其它的东西以适应该窗口。

响应式图像的实际意义是什么? 拿这个 来说:

image.png

默认情况下,Apple Watches 会选择 small.jpg,即使他们只需要 tiny.jpg 的分辨率。 好烧流量啊!

除非,你在

中加上这段神奇的文字:

image.png

加上之后,DPR 是这样的:

image.png

这将使响应式图像更高效地做选择,并且强制你确保布局保持在 136 像素宽的视图窗口上。

艺术感

我猜大多数响应式布局在 136 像素时表现不佳。 你知道还有什么可能经不起这种收缩吗? 图片内容! 在很小的物理尺寸下,许多东西将变得非常小,以至于它们变得不怎么清晰:

image.png

因此,在设计小屏幕时,请考虑一下艺术感。

image.png

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

小贴士

我认为(?)Apple Watch WebKit 的 uasge 数据目前仅仅只是一个舍入错误,但如果每天叫醒你的是推动响应式设计的极限,Apple Watch 会给出一个这么做的理由。 总结:

试着把你的布局调整为 136 像素宽

在你的 的 src 集合中使用 300w-ish 的资源

考虑艺术感以保持图像清晰可辨

使用神奇的

⌚️

英文原文:

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

目录
相关文章
|
6月前
|
缓存 JavaScript 数据处理
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
77 0
|
2月前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
1月前
|
缓存 JavaScript
|
5月前
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
283 0
|
缓存 JavaScript
vue的计算属性和watch的区别
vue的计算属性和watch的区别
84 0
|
6月前
|
JavaScript
Vue中$watch()方法和watch属性的区别
Vue中$watch()方法和watch属性的区别
157 1
|
6月前
|
JavaScript
Vue之监视属性(watch)
Vue之监视属性(watch)
|
6月前
|
JavaScript
使用set和emit在uni-app中实现响应式属性和自定义事件
使用set和emit在uni-app中实现响应式属性和自定义事件
200 0
|
6月前
|
JavaScript
vue中watch属性的用法
vue中watch属性的用法
54 0
|
11月前
|
小程序 JavaScript 前端开发
微信小程序(三十一)自定义watch监听属性
微信小程序并没有为我们在普通的页面中提供类似vue中watch类似的监听属性。 还是那句话,人家没给,你还想用,自己定义一个。
294 0