在Apple Watch上如何讓你的圖片響應式
原文作者:Eric
譯者:UC 國際研發 Jothy
寫在最前:歡迎你來到“UC國際技術”公眾號,我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章,不限於原創與翻譯。
目前 Apple Watch 預裝了一款瀏覽器。 Apple 在這方面有一些經驗,它創造了一類在 web 中通用的極小檢視視窗。 iPhone WebKit 給我們帶來了<meta name =“viewport” content =“width = device-width”>; :apple:而 Watch WebKit 創造了 <meta name =“disabled-adaptations” content =“watch”>。
2018 年的 <meta>-magic 與 2007 年的功能相同。 除非你告訴 Apple 你考慮的是一英寸寬的螢幕,否則他們會假設你是一個更大,更常見的視口,並縮小檢視。
我很好奇實現細節及其對響應式影象的影響,所以我進行了一個測試。 最近,我終於說服某人(我的老闆,hi Colin)執行 WatchOS 5 測試,結果很有意思。
我希望即使沒有新的 meta 宣告,Apple Watch 也能響應式地準確報告 DPR。 我希望他們能像這樣報告 DPR:
但是他們沒有。 現實是這樣的:
每塊手錶都模擬 320 畫素 x 2 = 640 實際畫素寬的檢視視窗 - 精確的物理畫素!- 並縮小其它的東西以適應該視窗。
響應式影象的實際意義是什麼? 拿這個 <img> 來說:
預設情況下,Apple Watches 會選擇 small.jpg,即使他們只需要 tiny.jpg 的解析度。 好燒流量啊:fire:!
除非,你在 <head> 中加上這段神奇的文字:
加上之後,DPR 是這樣的:
這將使響應式影象更高效地做選擇,並且強制你確保佈局保持在 136 畫素寬的檢視視窗上。
藝術感
我猜大多數響應式佈局在 136 畫素時表現不佳。 你知道還有什麼可能經不起這種收縮嗎? 圖片內容! 在很小的物理尺寸下,許多東西將變得非常小,以至於它們變得不怎麼清晰:
因此,在設計小螢幕時,請考慮一下藝術感。
…像這樣 。 對了! 你可以使用 Cloudinary 等工具自動進行影象識別和放大。
小貼士 :ribbon:
我認為(?)Apple Watch WebKit 的 uasge 資料目前僅僅只是一個舍入錯誤,但如果每天叫醒你的是推動響應式設計的極限,Apple Watch 會給出一個這麼做的理由。 總結:
-
試著把你的佈局調整為 136 畫素寬
-
在你的 <img> 的 src 集合中使用 300w-ish 的資源
-
考慮藝術感以保持影象清晰可辨
-
使用神奇的 <meta>
:watch:️
英文原文:
https://ericportis.com/posts/2018/respimg-apple-watch/
好文推薦:
ofollow,noindex">Hummingbird: 在Web上執行Flutter應用
“UC國際技術”致力於與你共享高質量的技術文章
歡迎關注我們的公眾號、將文章分享給你的好友