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

標籤：之間   開發人員   建立   定義   initial   under   user   返回   引入   

 

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

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

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

　　視口

　　案頭瀏覽器中，瀏覽器視窗就是約束你的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返回理想視口的尺寸，有嚴重相容性問題的，可能返回兩種值：

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

　　2、螢幕的裝置像素尺寸（內建瀏覽器）

　　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，謝謝　　

　　

 

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