CSS像素與絕對像素

以前在電視的webview上投放廣告頁面時，遇到了個問題，就是視窗大小和文檔大小不一致。最後發現原來有CSS Pixel這個概念，蒐集了一些資料，但願能把這個問題捋捋清楚。

首先提出一個你們經常會忽略的問題：

現在主流手機屏幕的像素點數已經遠遠超過了桌面顯示器的像素數量，5.5英寸1920x1080P的手機與一個21英寸1920x1080P的顯示器相比，同等面積下，手機的像素點更密集，可想而知，在手機屏幕上一個像素點是很是小的。

那麼在CSS中設置font-size:12px，若是「手機屏幕物理像素：CSS像素」=「1：1」，那麼手機上展現出來的字體你可能須要放大鏡才能看清，但爲何現在的手機屏幕依然能清晰的顯示？

答案就是：CSS中的px與屏幕上的物理像素px不是等同的。

邏輯分辨率與物理分辨率

因爲以上物理像素尺寸差別致使的問題，咱們不可能把電子文件中的像素與物理像素作1：1的適配。必須在小的設備上適當放大，也就是說用多個物理像素來顯示一個電子像素，從而保證閱讀質量。
因此devicePixelRatio應運而生：邏輯分辨率 = 物理分辨率 / devicePixelRatio

普通密度桌面顯示屏的devicePixelRatio=1
高密度桌面顯示屏(Mac Retina)的devicePixelRatio=2
主流手機顯示屏的devicePixelRatio=2或3

由於大部分桌面顯示器的devicePixelRatio爲1，因此在PC端咱們感覺不出來CSS Pixel 與 物理像素的差異。

舉個栗子來講，一張100x100的圖片，經過CSS設置它width:100px;height:100px。在電腦上打開，沒有什麼問題，可是在手機上打開，屏幕按照邏輯分辨率來渲染，假設手機的devicePixelRatio=3，那麼就至關於拿3個物理像素來描繪1個電子像素。這等於拿一個三倍的放大鏡去看你的圖片，你的圖片可能所以變得模糊，由於細節不夠。因此通常明智的作法是把圖片換成300x300的，CSS寬高不變，這樣在手機上展現時，CSS寬高換算成物理像素是300x300，你的圖片也是300x300，就不會變糊了。

移動端開發方案

打開一個頁面，移動端瀏覽器會自動尋找<meta name='viewport'>,若是指定了視窗口的width，就會把頁面放到指定width的viewport裏面。若是沒有指定，則默認值有的是980，具體根據瀏覽器來定的。（我遇到的就是這個問題，經過添加下面的代碼解決）

<meta name=」viewport」 content=」width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放

總結

當時由於是在電視上投放頁面，並未當成手機移動端來考慮，出現這個問題一直認爲是對方的問題，結果發現是頁面缺乏viewport meta標籤，反思良多。
本身的對於移動端Web開發瞭解的還不是不少，這篇文章一是記錄問題，二是能簡單梳理下CSS像素的概念。若是從此有機會接觸更多的移動開發的話，會另起爐竈寫一篇更爲詳細的關於這方面的文章，既是學習，也是記錄。

本文部分文字借鑑自知乎回答、網絡BLOG：