web前端開發者應如何應對PC端的高PPI？

01-21

移動端的瀏覽器有一個理想的視口尺寸可以解決，那麼桌面端瀏覽器呢？除了靠用戶自己縮放頁面或者設置默認字型大小，就沒有別的方法了嗎？

PC 端的 px 都是虛擬的，用得著關心么……

最多就是多準備幾組圖片用了吧

理想的情況下, PPI/解析度, 應當都是不會影響布局的, 真正影響布局的應該是寬高比/物理尺寸這種東西.

比如說你拿到兩個手機, 相近的屏幕大小和比例, 一個 720p , 一個4k解析度, 難道你希望同一個按鈕在前一個手機上一英寸大, 後一個手機上0.33英寸大? 又或者, 電腦的28寸屏幕, 跟手機一樣 1080p, 它們的布局也應該一樣么? 你再拿出一張地攤小報, 和一本盜版小黃書, 這兩種讀物, 它們的解析度和尺寸應該相差也甚遠, 但它們的文字大小卻是在一個相似的範圍.

文字/按鈕這種東西, 是讓人看的, 給人點的, 那麼它反映的應該是物理尺寸. 而布局講究的是屏幕空間的分配, 不能光考慮佔比, 也應該考慮屏幕的物理尺寸對信息量的影響.

現在 web 上的通行做法, 比如淘寶推崇的 lib-flexible, rem/vw 布局什麼的, 本質上還是 vw, 是相對於屏幕寬度的. 這種做法可以讓開發者用一個 iPhone6 的設計圖適配所有機型, 這就難免使布局跟實際的物理尺寸並不匹配, 還是略微粗糙.

=========

這也是為什麼 Android 最常用的布局單位是 dp(dip) , 最常用的字體單位是 sp, 這兩個跟物理像素 pixel 是沒有太大關係的.

我們來看兩個公式:

dp = (width in pixels * 160) / screen density screen density = screen width in pixels / screen width in inches

消掉 pixels, 於是 dp 就是一個跟 inches 有關而跟像素無關的相對單位了.

==========

那麼回到問題, 如果你希望網頁上的一個文字, 在不同的解析度下都能有一個適合閱讀的大小, 應該怎麼做呢?

很簡單, 先找到一個單位, 它與物理尺寸有關而與 PPI/像素無關. 找到了, 你就有答案了.

傳送門:

https://www.w3.org/TR/css3-values/#absolute-lengths

參考大漠前輩的使用Flexible實現手淘H5頁面的終端適配 · Issue #17 · amfe/article

另，icon 可以直接採用 svg。

現在瀏覽器都有虛擬尺寸啊，用那個不就行了

字體判斷一下，用em，貌似中國網站愛用全px，國外只在大包層用px