移動端開發入門--基礎知識

標籤：

1、一些概念

dp, pt

device-independent pixels 裝置無關像素, 基於裝置內的座標系統測量的物理單位, 代表了一個可以由程式使用的虛擬像素, 然後由底層系統轉換成邏輯像素(維基百科上拿來的, 翻不通。。。)

dpr

devicePixelRatio 裝置像素縮放比, 可以由window.devicePixelRadio獲得

layout-viewport

布局視口, 瀏覽器廠商為了完整顯示為PC設計的頁面而製造的虛擬層, 寬度比瀏覽器寬度要大, 具體由裝置廠商決定.

layout-viewport 的寬度可以由下面的js得到

var width = document.documentElement.clientWidth;　　

以下是一些裝置的預設視口尺寸

再貼一張布局視口的圖, 便於理解

visual-viewport

視覺視口, 瀏覽器的可視地區, 使用者可以縮放來調整其大小, 但不會改變布局視口的尺寸

visual-viewport的寬度可以由以下js得到

var width = window.innerWidth;　　

ideal-viewport

理想視口, 瀏覽器能夠完美適配行動裝置的視口, 所謂完美適配就是使用者無需縮放和使用捲軸就能看到網頁的全部內容, 並且文字和圖片的大小不管在何種解析度下都能顯示一樣. 

理想視口的尺寸因裝置不同而不同, 所有iPhone裝置的ideal-viewport都為320px, 無論它的螢幕寬度是多少.

也就是說 ideal-viewport的寬度就等於螢幕的寬度

2、meta標籤

屬性列表：

width: device-width | 數值

initial-scale: 初始縮放比例, 

maximum-scale|minimum-scale: 最大/最小縮放比例

user-scalable: no|yes

將當前viewport設定成 ideal-viewport

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

或者

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

這裡間接說明: initial-scale 是相對於 ideal-viewport 來進行縮放的

注意: 

當 initial-scale 與 width 衝突時, width 和 ideal-viewport 哪個大就使用哪個
但是, 在uc9 當initial-scale=1時，無論width屬性的值為多少，此時viewport的寬度永遠都是ideal viewport的寬度

因此較完美寫法應該是: 

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

3、縮放

上面提到, 縮放是相對於 ideal-viewport 來縮放的, 而且縮放的是visual-viewport的尺寸,  縮放比例越大, visual-viewport 的尺寸越小, 舉個栗子： 

ideal-viewport = 320px, initial-scale = 2,  visual-viewport的寬度為 320px / 2 = 160px; 

縮放並不會改變螢幕的寬度(廢話啊), 只是展開了一個css像素, 本來一個css像素只佔1個物理像素, 由於頁面被放大了兩倍, 一個css像素現在要佔4個物理像素, 所以螢幕可視區也就是 visual-viewport 的寬度相當於縮小到了原來的一半

注意：

在iphone和ipad上, 無論你給layout viewpor設定的寬度是多少，而又沒有指定初始的縮放值的話，那麼iphone和ipad會自動計算initial-scale這個值，以保證當前layout viewport的寬度在縮放後就是瀏覽器可視地區的寬度，也就是說不會出現橫向捲軸.

iPhone下 layout-viewport = 980, ideal-viewport = 320

initial-scale = ideal-viewport / layout-viewport;

預設值為 0.33左右, 當我們設定了 initial-scale, 瀏覽器就不會使用這個這個預設值.

 

參考網址：viewport詳解-簡書, A tale of two viewports - part one

 

 

移動端開發入門--基礎知識