在Apple Watch上如何讓你的圖片響應式

時間 2019-11-17

標籤 apple watch 如何讓你圖片響應欄目 MacBook 简体版

原文原文鏈接

原文做者：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> 中加上這段神奇的文字：

加上以後，DPR 是這樣的：

這將使響應式圖像更高效地作選擇，而且強制確保佈局基於 136 像素寬的視圖窗口。

藝術感

我猜大多數響應式佈局在 136 像素時表現不佳。你知道還有什麼可能經不起這種縮放嗎？沒錯，就是圖片！在極小的物理尺寸下，許多東西都將變得很是小，很是不清晰：

所以，在設計小屏幕時，請考慮一下藝術感。

…像這樣 🤣。對了！你可使用 Cloudinary 等工具自動進行圖像識別和放大。

小貼士 🎀

我認爲（？）Apple Watch WebKit 的 uasge 數據目前僅僅只是一個舍入錯誤，但若是推進響應式設計的極限真的很重要，Apple Watch 會給出一個這麼作的理由。

總結：

試着把你的佈局調整爲 136 像素寬
在你的 <img> 的 src 集合中使用 300w-ish 的資源
考慮藝術感以保持圖像清晰可辨
使用神奇的 <meta>

⌚️🕸🤘

英文原文：

https://ericportis.com/posts/2018/respimg-apple-watch/

好文推薦：

Hummingbird: 在Web上運行Flutter應用

「UC國際技術」致力於與你共享高質量的技術文章

歡迎關注咱們的公衆號、將文章分享給你的好友

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<