原文做者:Eric
譯者:UC 國際研發 Jothy前端
寫在最前:歡迎你來到「UC國際技術」公衆號,咱們將爲你們提供與客戶端、服務端、算法、測試、數據、前端等相關的高質量技術文章,不限於原創與翻譯。
目前 Apple Watch 也有瀏覽器了。 Apple 創造了一類在 web 中通用的極小視圖窗口。 iPhone WebKit 給咱們帶來了<meta name =「viewport」 content =「width = device-width」>; 🍎而 Watch WebKit 創造了 <meta name =「disabled-adaptations」 content =「watch」>。
2018 年的 <meta>-magic 與 2007 年的功能相同。 除非你在提早聲音你考慮的是一英寸寬的屏幕,不然 Apple 會假設你是一個更大更常見的視圖窗口,並縮小視圖。
我比較好奇它的實現細節及其對響應式圖像的處理方式,因此我進行了一個測試。 最近,我終於說服某人(個人老闆,hi Colin)在他的 WatchOS 5 上進行測試,結果頗有意思,咱們一塊兒來看看。
個人指望是,即便沒有新的 meta 聲明,Apple Watch 也能響應式地準確判斷 DPR。 個人預期 DPR 是這樣的:
Apple Watch 會模擬 320 像素 x 2 = 640 實際像素寬的視圖窗口(仍是精確的物理像素!),對屏幕上的其它的東西進行縮放以適應該窗口。
那麼響應式圖像的實際意義是什麼? 拿這個 <img> 來講:
默認狀況下,即便用戶須要的只是 tiny.jpg 的分辨率,Apple Watches 仍是會選擇 small.jpg。 好燒流量啊🔥!
要避免這種狀況,你得在 <head> 中加上這段神奇的文字:
這將使響應式圖像更高效地作選擇,而且強制確保佈局基於 136 像素寬的視圖窗口。
我猜大多數響應式佈局在 136 像素時表現不佳。 你知道還有什麼可能經不起這種縮放嗎? 沒錯,就是圖片! 在極小的物理尺寸下,許多東西都將變得很是小,很是不清晰:
…像這樣 🤣。 對了! 你可使用 Cloudinary 等工具自動進行圖像識別和放大。
我認爲(?)Apple Watch WebKit 的 uasge 數據目前僅僅只是一個舍入錯誤,但若是推進響應式設計的極限真的很重要,Apple Watch 會給出一個這麼作的理由。
https://ericportis.com/posts/2018/respimg-apple-watch/