裝置畫素和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在瀏覽器內顯示的區域高度。