原文作者:Eric
譯者:UC 國際研發 Jothy
----
目前 Apple Watch 預裝了一款浏覽器。 Apple 在這方面有一些經驗,它創造了一類在 web 中通用的極小視圖視窗。 iPhone WebKit 給我們帶來了; 而 Watch WebKit 創造了 。
2018 年的 -magic 與 2007 年的功能相同。 除非你告訴 Apple 你考慮的是一英寸寬的螢幕,否則他們會假設你是一個更大,更常見的視口,并縮小視圖。
我很好奇實作細節及其對響應式圖像的影響,是以我進行了一個測試。 最近,我終于說服某人(我的老闆,hi Colin)運作 WatchOS 5 測試,結果很有意思。
我希望即使沒有新的 meta 聲明,Apple Watch 也能響應式地準确報告 DPR。 我希望他們能像這樣報告 DPR:

但是他們沒有。 這才是現實:
每塊手表都模拟 320 像素 x 2 = 640 實際像素寬的視圖視窗 - 精确的實體像素!- 并縮小其它的東西以适應該視窗。
響應式圖像的實際意義是什麼? 拿這個 來說:
預設情況下,Apple Watches 會選擇 small.jpg,即使他們隻需要 tiny.jpg 的分辨率。 好燒流量啊!
除非,你在
中加上這段神奇的文字:
加上之後,DPR 是這樣的:
這将使響應式圖像更高效地做選擇,并且強制你確定布局保持在 136 像素寬的視圖視窗上。
藝術感
我猜大多數響應式布局在 136 像素時表現不佳。 你知道還有什麼可能經不起這種收縮嗎? 圖檔内容! 在很小的實體尺寸下,許多東西将變得非常小,以至于它們變得不怎麼清晰:
是以,在設計小螢幕時,請考慮一下藝術感。
…像這樣 。 對了! 你可以使用 Cloudinary 等工具自動進行圖像識别和放大。
小貼士
我認為(?)Apple Watch WebKit 的 uasge 資料目前僅僅隻是一個舍入錯誤,但如果每天叫醒你的是推動響應式設計的極限,Apple Watch 會給出一個這麼做的理由。 總結:
試着把你的布局調整為 136 像素寬
在你的 的 src 集合中使用 300w-ish 的資源
考慮藝術感以保持圖像清晰可辨
使用神奇的
⌚️
英文原文:
https://ericportis.com/posts/2018/respimg-apple-watch/