之前在電視的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：