在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/

目录
相关文章
|
23天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
13 0
|
3月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
28 0
|
9月前
|
JavaScript
使用vue和element组件实现语音的上传和播放功能
大家好,今天和大家分享一下使用vue和element组件来实现语音上传和语音播放这个功能。 其实上传音频其实和上传图片差不多 下面的代码没有必要说都写下来,看自己需要什么
|
2月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
2月前
|
JavaScript
Vue中$watch()方法和watch属性的区别
Vue中$watch()方法和watch属性的区别
36 1
|
2月前
|
存储 JavaScript 前端开发
vue使用navigator.mediaDevices.getUserMedia调用相机功能
vue使用navigator.mediaDevices.getUserMedia调用相机功能
79 0
|
3月前
|
JavaScript
使用set和emit在uni-app中实现响应式属性和自定义事件
使用set和emit在uni-app中实现响应式属性和自定义事件
33 0
|
4月前
【Vue2.0学习】—watch和computed对比(三十七)
【Vue2.0学习】—watch和computed对比(三十七)
|
4月前
|
小程序 JavaScript 前端开发
微信小程序(三十一)自定义watch监听属性
微信小程序并没有为我们在普通的页面中提供类似vue中watch类似的监听属性。 还是那句话,人家没给,你还想用,自己定义一个。
54 0
|
5月前
uni-app渲染商品列表
uni-app渲染商品列表
29 1