前端-裝置畫素比和viewport

程式設計碼農發表於2021-11-04

裝置畫素和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 是整個螢幕的大小。

viepwport

視口中經常需要區分佈局視口(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 12390 x 8441170 x 2532
iPhone 12 Mini360 x 7801080 x 2340
iPhone 12 Pro390 x 8441170 x 2532
iPhone 12 Pro Max428 x 9261248 x 2778
iPhone SE214 x 379640 x 1136
iPhone 11 Pro Max414 x 8961242 x 2688
iPhone 11 Xs Max414 x 8961242 x 2688
iPhone 11414 x 896828 x 1792
iPhone 11 Xr414 x 896828 x 1792
iPhone 11 Pro375 x 8121125 x 2436
iPhone 11 X375 x 8121125 x 2436
iPhone 11 Xs375 x 8121125 x 2436
iPhone X375 x 8121125 x 2436
iPhone 8 Plus414 x 7361080 x 1920
iPhone 8375 x 667750 x 1334
iPhone 7 Plus414 x 7361080 x 1920
iPhone 7375 x 667750 x 1334
iPhone 6s Plus414 x 7361080 x 1920
iPhone 6s375 x 667750 x 1334
iPhone 6 Plus414 x 7361080 x 1920
iPhone 6375 x 667750 x 1334
iPad Pro1024 x 13662048 x 2732
iPad Third & Fourth Generation768 x 10241536 x 2048
iPad Air 1 & 2768 x 10241536 x 2048
iPad Mini768 x 1024768 x 1024
iPad Mini 2 & 3768 x 10241536 x 2048
Nexus 6P411 x 7311440 x 2560
Nexus 5X411 x 7311080 x 1920
Google Pixel411 x 7311080 x 1920
Google Pixel XL411 x 7311440 x 2560
Google Pixel 2411 x 7311080 x 1920
Google Pixel 2 XL411 x 8231440 x 2880
Samsung Galaxy Note 5480 x 8531440 x 2560
LG G5360w x 6401440 x 2560
LG G4360w x 6401440 x 2560
LG G3360w x 6401440 x 2560
One Plus 3480 x 8531080 x 1920
Samsung Galaxy S9360 x 7401440 x 2960
Samsung Galaxy S9+360 x 7401440 x 2960
Samsung Galaxy S8360 x 7401440 x 2960
Samsung Galaxy S8+360 x 7401440 x 2960
Samsung Galaxy S7360 x 6401440 x 2560
Samsung Galaxy S7 Edge360 x 6401440 x 2560
Nexus 7 (2013)600 x 9601200 x 1920
Nexus 9768 x 10241536 x 2048
Samsung Galaxy Tab 10800 x 1280800 x 1280
Chromebook Pixel1280 x 8502560 x 1700

https://experienceleague.adob...

https://viewportsizes.com

一些長寬屬性

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

window

相關文章