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

目录
相关文章
|
应用服务中间件 索引 nginx
生产环境ES查询延迟排查
最近经常收到业务方配置的ES查询延迟告警,同样的请求手动在Kibana控制台执行只需几十毫秒就返回结果。受影响的整个链路情况如下,php应用程序通过部署在ES集群各节点上的nginx访问ES请求查询数据。
5667 0
|
9月前
|
人工智能 弹性计算 运维
操作系统控制台体验测评
操作系统管理平台是一个智能服务器管家,提供便捷易用的可视化操作界面,帮助用户高效管理操作系统。它具备运维管理、智能助手、扩展组件管理等功能,提升操作系统使用效率和体验。首次使用需开通服务并准备兼容的操作系统ECS实例(如Alibaba Cloud Linux、CentOS等),通过安装管控组件实现纳管。平台提供系统健康监测、诊断、观测及订阅服务等功能,确保集群和主机的稳定运行,并为用户提供专业指导和优化建议。智能助手功能则实现了集群多主机的自动化管理及实时技术问答支持。
367 64
|
9月前
|
存储 数据挖掘 数据处理
2600 万表流计算分析如何做到? 时序数据库 TDengine 助力数百家超市智能化转型
在生鲜超市的高效运营中,实时数据分析至关重要。万象云鼎的“云鲜生”通过智能秤+网关+软件系统的组合,实现了销售数据的精准管理与优化。而在数据处理方面,TDengine 的流计算能力成为了这一方案的核心支撑。本文详细分享了“云鲜生”如何利用 TDengine 高效存储和分析海量销售数据,在优化超市运营、提升用户体验的同时,解决高基数分组、高并发查询等技术挑战。
249 1
|
Web App开发 编解码 资源调度
在阿里云直播解决方案中,当使用ARTC协议观看直播并进行清晰度切换时出现画面卡顿或马赛克现象,可能存在以下几种原因
【6月更文挑战第30天】阿里云直播中,ARTC协议下清晰度切换出现卡顿或马赛克可能由网络带宽、缓冲策略、转码效率、播放器解码、协议特点及服务器资源调度引起。解决措施包括优化网络、智能切换算法、播放器与服务器优化。通过监控和日志分析定位问题,参照官方最佳实践进行优化。
593 1
|
11月前
|
人工智能 编解码 自动驾驶
MagicDriveDiT:华为联合港中文等机构推出的自动驾驶高分辨率长视频生成方法
MagicDriveDiT是由华为联合港中文等机构推出的一种新型自动驾驶高分辨率长视频生成方法。该方法基于DiT架构,通过流匹配增强模型的可扩展性,并采用渐进式训练策略处理复杂场景。MagicDriveDiT能够生成高分辨率的长视频,提供对视频内容的精确控制,适用于自动驾驶系统的测试与验证、感知模型训练、场景重建与模拟以及数据增强等多个应用场景。
283 17
MagicDriveDiT:华为联合港中文等机构推出的自动驾驶高分辨率长视频生成方法
物联网:NB卡是否支持2/3/4G网络
在讨论“NB卡是否支持2/3/4G网络”的问题时,我们首先需要明确“NB卡”指的是什么。在通信领域中,“NB卡”通常指的是支持NB-IoT(Narrowband Internet of Things,窄带物联网)技术的SIM卡或模块。NB-IoT是一种专为物联网设计的窄带无线通信技术,它基于现有的蜂窝网络进行构建,但专注于低功耗广域网(LPWAN)应用。
|
机器学习/深度学习 数据采集 TensorFlow
使用Python实现深度学习模型:智能艺术品鉴定与修复
使用Python实现深度学习模型:智能艺术品鉴定与修复
230 1
|
搜索推荐 测试技术
MBTI:探索你的性格类型
MBTI:探索你的性格类型
457 4
|
缓存 NoSQL 关系型数据库
数据传输服务的主要功能
【6月更文挑战第4天】数据传输服务的主要功能
340 3
|
API
Apose.word控件获取书签中的内容并复制到一个新的word文档中
Apose.word控件获取书签中的内容并复制到一个新的word文档中
594 0
Apose.word控件获取书签中的内容并复制到一个新的word文档中