移動端網頁開發所要具有的基礎知識二（視口）

 

　　作移動端網頁，首先必須瞭解一些基本的概念。

　　最重要的是瞭解像素和視口。

　　我在上一篇文章中已經介紹了像素，此次咱們再來談談視口。

　　視口

　　桌面瀏覽器中，瀏覽器窗口就是約束你的css佈局視口（又稱初始包含塊）。它是全部css百分比寬度推算的根源，它的做用是給css佈局限制了一個最大寬度，視口的寬度和瀏覽器視口寬度一致。

　　可是在移動端，狀況就很複雜了。

　　1️⃣佈局視口（layout viewport）

　　瀏覽器廠商爲了讓用戶在小屏幕下網頁也能很好地顯示，因此把視口寬度設置地很大，通常在768px~1024px之間，最多見的寬度是980px。

　　因此，在手機上，視口與移動端瀏覽器屏幕寬度再也不是相關聯，是徹底獨立的，這個瀏覽器廠商定的視口被稱爲佈局視口。

　　

　　超過屏幕寬度將出現橫向滾動條。

　　能夠這樣設置佈局視口的寬度：

　　<meta name="viewport" content="width=640">

　　document.documentElement.clientWidth/Height返回佈局視口的尺寸。

　　

　　視覺視口（visual viewport）

　　視覺視口是用戶正在看到的網頁的區域，大小是屏幕中css像素的數量。

　　

　　window.innerWidth/Height返回視覺視口的尺寸。

　　

　　理想視口

　　佈局視覺明顯對用戶是不友好的，徹底忽略了手機自己的尺寸。因此蘋果引入了理想視口的概念，它是對設備來講最理想的佈局視口尺寸。理想視口對用戶來講是最理想的，用戶進入頁面的時候不須要縮放。

　　所謂的（最理想的寬度）多少合適呢？其實，若是咱們把佈局視口的寬度改爲屏幕的寬度就不用縮放了，能夠這樣設置告訴瀏覽器使用它的理想視口：

　　<meta name="viewport" content="width=device-width">

　　定義理想視口是瀏覽器的事情，並不能簡單地認爲是開發者定義的，開發者只能使用。

　　screen.width/height返回理想視口的尺寸，有嚴重兼容性問題的，可能返回兩種值：

　　一、理想視口的尺寸（下載瀏覽器）

　　二、屏幕的設備像素尺寸（內置瀏覽器）

　　Screen size tests和Understanding viewport能夠測試你的設備的screen.width值，同一設備的不一樣瀏覽器返回的值多是不同的。這一狀況主要發生在默認瀏覽器和下載瀏覽器（如UC、Chrome）之間。

　　下載瀏覽器所有返回的都是理想視口尺寸。

　　

　　縮放

　　縮放與設備像素、css像素的關係

　　縮放是在放大或縮小css像素，好比一個寬度爲200px的元素不管放大多少，仍是200個css像素。可是由於這些像素被放大了，因此css像素也就跨越了更多的設備像素，縮小則相反。

　　

　　縮放與視口

　　縮放會影響視覺視口的尺寸。

　　頁面被用戶放大，視覺視口內css像素數量減小，被用戶縮小，視覺視口內css像素數量增多。

　　用戶縮放不會影響佈局視口。

 

　　縮放比例

　　咱們在開發者工具中能夠在這裏查看縮放比例：

　　

　　這裏的0.3是相對於理想視口的。

　　在下載瀏覽器中，能夠這麼算（理想視口與視覺視口的比）

　　zoom level=screen.width/window.innerWidth

　　

　　禁止縮放

　　<meta name="viewport" content="user-scalable=no">

 

　　設置縮放

　　<meta name=viewport" content="initial-scale=2">

　　使用initial-scale有一個反作用：同時也會將佈局視口的尺寸設置爲縮放後的尺寸。因此initial-scale=1與width=device-width的效果是同樣的。

　　

　　完美視口

　　解決各類瀏覽器兼容問題的理想視口設置

　　<meta name="viewport" content="width=devive-width,initial-scale=1">

　　

　　設備像素比

　　在談到像素的時候，講到除了縮放，屏幕是否爲高密度也會影響設備像素和css像素的關係。

　　在縮放程度爲100%時，他們的比例叫作設備像素比（device pixel ratio）:

　　dpr=設備像素/css像素

　　能夠經過JS獲得：window.devecePixelRatio

　　設備像素比也和視口有關：

　　dpr=屏幕橫向寬度/理想視口寬度

　　

　　最後打個廣告，歡迎加入本人建立的前端qq羣399627992，謝謝