螢幕尺寸不等於視窗尺寸
三種尺寸經常被混淆,一旦搞錯就會寫出只在別人機器上出問題的佈局。螢幕解析度描述的是物理面板,無論你怎麼縮放視窗都不會變;可用螢幕區域會減去被系統長期佔用的部分,例如工作列或 macOS 選單欄;視口才是頁面真正能繪製的區域,也是三者中唯一被 CSS 媒體查詢採納的值。
除錯響應式佈局時,你要的幾乎總是視口尺寸。使用者的顯示器可能有 3840 畫素寬,但他也許只開了一個 700 畫素寬的視窗。如果媒體查詢按螢幕寬度寫,就會在放不下的空間裡輸出桌面版佈局。
裝置畫素比把兩者聯絡起來。畫素比為 2 表示每個 CSS 畫素由 2×2 個物理畫素繪製,這正是老顯示器上清晰的圖片在新筆記本上發虛的原因。用視口尺寸乘以畫素比,才是點陣圖真正需要的畫素數。
User Agent 會撒謊,而且是故意的
User Agent 是本頁最不可信的欄位。幾十年來各家瀏覽器都在自己的標識裡塞進別家的名字,只為繞過寫得很糟的服務端判斷,所以今天的 Chrome 仍然會同時聲稱自己是 Mozilla、AppleWebKit、KHTML、Gecko 和 Safari。為了抑制指紋追蹤,瀏覽器廠商正在凍結並精簡這個字串。
請把它當作提示,而不是判斷依據。要確認某個能力是否存在,就直接檢測該能力:一行程式碼即可,能在你寫程式碼時還不存在的瀏覽器上正常工作,也不會因為廠商改寫 User Agent 而失效。
這些數值暴露了什麼
單看任何一項都無法定位到具體的人,但組合起來的區分度高得驚人。螢幕解析度、時區、語言列表、CPU 核心數與畫素比拼在一起,往往能在數百萬訪客中唯一確定一個人——追蹤指令碼收集它們正是這個原因。
這也是部分欄位被刻意模糊或直接隱藏的原因。裝置記憶體會向下取整到很粗的檔位,有些瀏覽器會限制核心數上報、完全不暴露記憶體,或者返回通用的平臺字串。Do Not Track 實際上已被放棄:幾乎沒有站點遵守,多數瀏覽器也不再發送,所以這裡為空並不能說明任何問題。
對開發的現實建議是:只採集你真正需要的最少資訊。如果你想決定要不要載入重量級動畫,就去測量首幀的實際渲染耗時,而不是靠核心數猜測。真實測量勝過推斷硬體規格,而且不會增加指紋面積。