裝置畫素和CSS畫素
裝置畫素（device pixels）也叫做裝置物理畫素是一個具體可測量的物理單位。
CSS 畫素是與裝置無關的畫素，這一類畫素也叫做獨立裝置畫素（Device-independent pixel），它們是應用程式的抽象單位。當應用程式執行時，底層圖形系統會按照一定的比例（裝置物理畫素和裝置獨立畫素比）將應用程式的抽象畫素轉換為適用於裝置的物理畫素。
裝置物理畫素和裝置獨立畫素的比例，\( dp \) 裝置物理畫素，\( dips \) 裝置獨立畫素。
$$ dpr = \frac{dp}{dips} $$
將 CSS 佈局中的px是相對於物理畫素的單位，在大多數瀏覽器中，通過 window.devicePixelRatio 可以得到物理畫素與它的比率。比如在 iPhone6 上解析度750x1334，它的window.devicePixelRatio=2 所以它螢幕寬度為375px，共有750個物理畫素，即1px代表兩個物理畫素。
下面是 window.devicePixelRatio 瀏覽器的相容性。
視口(Viewport)
瀏覽器中的 viewport 和<html>區域相同，可以看作是<html>上層的包含塊。在大多數移動裝置中，瀏覽器是全屏的，所以 viewport 是整個螢幕的大小。
視口中經常需要區分佈局視口（layout viewport），視覺視口（visual viewport）和理想視口（ideal viewport）
佈局視口可以看作是CSS佈局時的畫布，視覺視口是當前顯示的頁面區域，理想視口是頁面在裝置最佳的呈現。
理想的呈現方式是終極目標，可以使使用者體驗大大提升，特別是在非PC裝置上，理想的狀態意味著：
- 佈局視口寬度 = 視覺視口寬度 = 裝置寬度。
如果佈局視口寬度 ≠ 視覺視口寬度， 出現的情況就是內容過寬，使用者可能就需要縮放來檢視內容，縮小後，看起來費勁，放大後需要左右滑動檢視。
移動裝置
移動瀏覽器和桌面瀏覽器最大的區別是螢幕寬度小很多，對於很多針對PC設計的網頁會因為寬度變窄而顯示錯亂。
因為移動裝置瀏覽器認為自己必須能讓所有的網站都正常顯示，這包括了很多PC端網站，所以各移動瀏覽器廠商統一將裝置預設佈局視口設定為 980px。
比如在寬 375px 的 iphone6 上顯示一個寬為 980px 的頁面，大多數瀏覽器為了讓頁面顯示全而縮小頁面。
我們可以使用meta viewport讓瀏覽器佈局視區等於螢幕寬度也就是375px，這樣顯示出來就是理想效果。
<meta name="viewport" content="width=device-width"/>
下面這個meta是我們在開發移動裝置的網站最常用的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">該meta標籤的作用是讓當前佈局視口的寬度等於裝置的寬度，同時不允許使用者手動縮放。
meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支援，事實也證明這個東西還是非常有用的。
下面是一些裝置的解析度和視口大小：
| 裝置 | 視口大小 （寬x高） | 裝置解析度（寬x高） |
|---|---|---|
| iPhone 12 | 390 x 844 | 1170 x 2532 |
| iPhone 12 Mini | 360 x 780 | 1080 x 2340 |
| iPhone 12 Pro | 390 x 844 | 1170 x 2532 |
| iPhone 12 Pro Max | 428 x 926 | 1248 x 2778 |
| iPhone SE | 214 x 379 | 640 x 1136 |
| iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 |
| iPhone 11 Xs Max | 414 x 896 | 1242 x 2688 |
| iPhone 11 | 414 x 896 | 828 x 1792 |
| iPhone 11 Xr | 414 x 896 | 828 x 1792 |
| iPhone 11 Pro | 375 x 812 | 1125 x 2436 |
| iPhone 11 X | 375 x 812 | 1125 x 2436 |
| iPhone 11 Xs | 375 x 812 | 1125 x 2436 |
| iPhone X | 375 x 812 | 1125 x 2436 |
| iPhone 8 Plus | 414 x 736 | 1080 x 1920 |
| iPhone 8 | 375 x 667 | 750 x 1334 |
| iPhone 7 Plus | 414 x 736 | 1080 x 1920 |
| iPhone 7 | 375 x 667 | 750 x 1334 |
| iPhone 6s Plus | 414 x 736 | 1080 x 1920 |
| iPhone 6s | 375 x 667 | 750 x 1334 |
| iPhone 6 Plus | 414 x 736 | 1080 x 1920 |
| iPhone 6 | 375 x 667 | 750 x 1334 |
| iPad Pro | 1024 x 1366 | 2048 x 2732 |
| iPad Third & Fourth Generation | 768 x 1024 | 1536 x 2048 |
| iPad Air 1 & 2 | 768 x 1024 | 1536 x 2048 |
| iPad Mini | 768 x 1024 | 768 x 1024 |
| iPad Mini 2 & 3 | 768 x 1024 | 1536 x 2048 |
| Nexus 6P | 411 x 731 | 1440 x 2560 |
| Nexus 5X | 411 x 731 | 1080 x 1920 |
| Google Pixel | 411 x 731 | 1080 x 1920 |
| Google Pixel XL | 411 x 731 | 1440 x 2560 |
| Google Pixel 2 | 411 x 731 | 1080 x 1920 |
| Google Pixel 2 XL | 411 x 823 | 1440 x 2880 |
| Samsung Galaxy Note 5 | 480 x 853 | 1440 x 2560 |
| LG G5 | 360w x 640 | 1440 x 2560 |
| LG G4 | 360w x 640 | 1440 x 2560 |
| LG G3 | 360w x 640 | 1440 x 2560 |
| One Plus 3 | 480 x 853 | 1080 x 1920 |
| Samsung Galaxy S9 | 360 x 740 | 1440 x 2960 |
| Samsung Galaxy S9+ | 360 x 740 | 1440 x 2960 |
| Samsung Galaxy S8 | 360 x 740 | 1440 x 2960 |
| Samsung Galaxy S8+ | 360 x 740 | 1440 x 2960 |
| Samsung Galaxy S7 | 360 x 640 | 1440 x 2560 |
| Samsung Galaxy S7 Edge | 360 x 640 | 1440 x 2560 |
| Nexus 7 (2013) | 600 x 960 | 1200 x 1920 |
| Nexus 9 | 768 x 1024 | 1536 x 2048 |
| Samsung Galaxy Tab 10 | 800 x 1280 | 800 x 1280 |
| Chromebook Pixel | 1280 x 850 | 2560 x 1700 |
一些長寬屬性
screen
screen.width：返回螢幕寬度。screen.height：返回螢幕高度。screen.availWidth：返回螢幕可用寬度。即螢幕寬度減去左右工作列後的寬度，可表示為軟體最大化時的寬度。screen.availHeight：返回螢幕可用高度。即螢幕高度減去上下工作列後的高度，可表示為軟體最大化時的高度。
window
window.outerWidth：返回瀏覽器寬度。window.outerHeight：返回瀏覽器高度。window.innerWidth：瀏覽器內頁面可用寬度，包含了垂直滾動條的寬度。window.innerHeight：瀏覽器內頁面可用高度，包含水平滾動條的高度。window.pageXOffset：瀏覽器內頁面的水平滾動偏移量。window.pageYOffset：瀏覽器內頁面的垂直滾動偏移量。
body
document.body.offsetWidth：body總寬度。document.body.offsetHeight：body總高度。document.body.clientWidth：body展示的寬度；表示body在瀏覽器內顯示的區域寬度。document.body.clientHeight：body展示的高度；表示body在瀏覽器內顯示的區域高度。
