07-移動端開發教程-移動端視口
老馬初始學習視口的概念的時候,看了很多的文章,看來很多的資料,鮮有人能把這個東西講的非常透徹的。老馬接下來就從初學者能看懂的角度去講解視口和適配的方案。
1. 關於螢幕
1.1 螢幕尺寸
裝置螢幕尺寸是指螢幕的對角線長度。比如:iphone6/7是4.7寸,iphone6/7p是5.5寸。
1英寸 = 2.54釐米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.0*2.54cm = 12.7cm 5.5in = 5.5*2.54cm = 13.97cm 6.0in = 6.0*2.54cm = 15.24cm
手機尺寸
在這裡可以檢視大部分流行手機的螢幕尺寸:地址
1.2 螢幕解析度
螢幕解析度是指:螢幕的畫素點數。
在PC端的解析度常見是:[ 1366*768, 1440*900, 1024*768, 1400*900,...]
移動端常見解析度: [2160*1080, 1920*1080, 1334*750, 1136*640...]
在說解析度的時候我們常常會把大的值說在前面,所以在PC端螢幕寬度比高度的值要大一點,第一個值一般是指的寬度第二個值為高度。
移動端正好相反,手機一般寬度都是小於高度,所以第一個值是寬度。
補充幾個概念 Full HD(全高清): 1920 * 1080解析度,iphone7p就是這個。 4K屏
: 也叫QHD或UHD(超高清),最小解析度是3840 * 2160,電視用的多 裝置相機的畫素: 640*480 = 307200 = 30萬畫素 1600*1200 = 1920000 = 200萬畫素 3264*2488 = 8120832 = 800萬畫素 4536*3024 = 13716864 = 1400萬畫素
1.3 裝置的PPI/DPI
PPI(Pixels Per Inch)| DPI(Dots Per Inch),兩個值是螢幕每英寸的畫素數量,即畫素密度(Screen density)。
一般的計算方法或者公式: DPI= 對角線解析度 / 螢幕尺寸
螢幕對角線的解析度也就是螢幕對角線上的畫素點數,可以根據已知的橫縱解析度通過勾股定理計算得。
補充:三角形勾股定理
計算如下手機dpi:
手機dpi計算
勾股定理算出對角線的解析度
對角線解析度除以螢幕尺寸:2203/5≈440dpi
1.4 裝置畫素(device pixel)與邏輯畫素(css畫素)
1.4.1 裝置畫素(device pixel):
裝置畫素是物理概念,指的是裝置中使用的物理畫素,也就是螢幕中的發光的點數(螢幕由很多個發光點組成,每個發光點可以顯示不同的顏色,這些發光的點組成了螢幕)。
比如iPhone 5的解析度640 x 1136px。橫向有640個發光的點,縱向有1136個發光的點。所以我們說iPhone5 的裝置水平畫素是640畫素,指的是640個發光點。
1.4.2 CSS畫素(css pixel):
CSS畫素是Web程式設計的概念,CSS樣式程式碼中使用的邏輯畫素。1個邏輯畫素可能對應多個物理畫素(發光點)。
在CSS規範中,長度單位可以分為兩類,絕對(absolute)單位以及相對(relative)單位。px是一個相對單位,相對的是裝置畫素(device pixel)。
例如1: 假設老馬電腦的物理解析度是1024* 768。 如果我故意設定作業系統解析度為512*384(水平和垂直各縮小1倍),那麼此時css定義的1px畫素的盒子在螢幕中的顯示的寬度比原來高解析度的寬度增加一倍,所以CSS中的畫素只是相對,不是絕對的。
例如2: iPhone 5使用的是Retina視網膜螢幕,橫向邏輯css的畫素是320px,但是實際物理畫素是640的點,所以水平方向就會有2個點對應css的1個畫素,垂直也是兩倍的關係,也就是1個css的邏輯畫素:由水平2個物理畫素點和垂直2個畫素點也就是(2乘2=4)4個物理畫素點 顯示1px寬1px高的一個邏輯的css畫素。如果是css畫素是:2px*2px呢?
左側是正常的螢幕,右側是視網膜屏
由於這個2倍的關係,我們也稱iphone5為兩倍屏,也就是dpr。
1.4.3 裝置獨立畫素(DIP)
裝置獨立畫素(DIP,device-independent pixel,density-independent pixel),簡單地來說裝置獨立畫素就是:獨立於裝置的用於邏輯上衡量畫素的單位。在移動Web開發中就是指的CSS的邏輯畫素。
1.5 裝置畫素比(devicePixelRatio)
裝置畫素比(dpr) 與 ppi有一定的相關性,即ppi越大,dpr也相應的較大,1dpr 對應160ppi ,其對照表如下:
dpi |
dpi |
dpi |
dpi |
|
---|---|---|---|---|
ppi |
120 |
160 |
240 |
320 |
預設縮放比(dpr) |
0.75 |
1.0 |
1.5 |
2.0 |
裝置畫素比DPR(devicePixelRatio)是預設縮放為100%的情況下,裝置畫素(也稱物理畫素)和CSS畫素的比值(裝置獨立畫素)。
DPR = 裝置畫素 / CSS畫素
僅僅計算橫向或者縱向。比如:iphone5為例:水平物理畫素640 頁面縮放100%時,橫向320px,則dpr = 640 / 320 = 2
DPR也有對應的javascript屬性window.devicePixelRatio
(ie11+,edge,chrome49+, Safari9.1+)
DPR不一定都是整數,尤其是android裝置十分的碎片化!
2. 視口
問題:PC端設計的網頁一般都是大於960px 尺寸,移動端上的瀏覽器為了能夠將那些為PC端設計的網站正常顯示,一般都給一個預設的整屏的寬度為980px(css畫素),雖然能這樣讓移動端瀏覽器相容大部分PC端頁面,但是頁面縮放後文字會變得非常小,使用者需要手動放大縮小才能看清楚,體驗非常差。
PC端頁面在手機上顯示效果
蘋果首先在瀏覽器上引入了視口的功能,隨後各大瀏覽器都跟隨實現。
視口(viewport)是使用者網頁的可視區域,也可稱之為視區。
2.1 PC端視口
PC端視口的大小跟瀏覽器的可視區的寬高保持1:1固定比例對應。也就是說瀏覽器改變寬高,視口跟著改變。
2.2 移動端視口
在移動端視口與移動端瀏覽器螢幕寬度不再相關聯,可以比瀏覽器的可視區域更大或者更小,還可以對頁面進行縮放(放大、縮小)。
由於移動端的視口可以進行放大、縮小、改變寬高,所以造成了視口的大小跟螢幕能顯示的內容的寬度和佈局的寬度不一致,這就出現兩個概念:佈局視口和視覺視口。
2.2.1 檢視視口(visual viewport)
檢視視口是手持裝置物理螢幕的可視區域。
視覺視口是使用者正在看到的網站的區域,對於的javascript屬性是window.innerWidth/Height
2.2.2 佈局視口(layout viewport)
佈局視口:在移動端視口與移動端瀏覽器螢幕寬度不再相關聯,可以單獨設定它的寬高(主要是寬),這個視口就是HTML頁面佈局的區域,並且可以通過viewport meta標籤控制。
佈局視口不會受到縮放的影響,縮放不會導致頁面重排渲染,對於移動端寶貴的效能來說非常重要。
layout viewport佈局視口的寬度可以通過js的document.documentElement.clientWidth
獲取。
各個瀏覽器預設的佈局視口寬度:
2.2.3 meta標籤控制佈局視口的寬度
meta標籤設定佈局視口的語法:
<meta name="viewport" content="name1=value1,name2=value2">
Name |
Value |
Description |
---|---|---|
width |
正整數或device-width |
設定佈局視口的寬度,單位為畫素 |
height |
正整數或device-height |
定義佈局視口的高度,單位為畫素(未實行) |
initial-scale |
[0.0-10.0] |
定義初始頁面(佈局視口)縮放值 |
minimum-scale |
[0.0-10.0] |
定義使用者縮小最小比例,它必須小於或等於maximum-scale設定 |
maximum-scale |
[0.0-10.0] |
定義使用者放大最大比例,它必須大於或等於minimum-scale設定 |
user-scalable |
yes/no |
定義是否允許使用者手動縮放頁面,預設值yes |
width是設定佈局視口的寬度。如果設定iphone5s具體的width值為:320。
<meta name="viewport" content="width=320">
如果只是設定viewport的width屬性時,iphone的瀏覽器自動將頁面進行縮放到恰好放下頁面而不出現滾動條,所以此時:visual viewport == layourt viewport。
上例中:就像把螢幕分成320份。如果設定一個元素為100px*100px,看起來就是螢幕的100/320
如果佈局視口的寬度=device-width(裝置寬度,也就是:物理畫素/dpr)時,此時頁面100%的寬度正好能在視覺視口中完全顯示,不需要縮放檢視頁面了,而且在不同尺寸下都能基本表現一致,此時的佈局視口的狀態我們就稱為理想視口(ideal viewport)。
測試程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理想視口</title>
<style>
html, body, div {
padding: 0;
margin: 0;
}
.box {
width: 100%;
height: 100px;
background-color: #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2.2.4 理想視口(ideal viewport)
所謂的理想視口是: 第一,不需要使用者縮放和橫向滾動條就能正常的檢視網站的所有內容; 第二,顯示的文字的大小是合適,比如一段14px大小的文字,不會因為在一個高密度畫素的螢幕裡顯示得太小而無法看清,理想的情況是這段14px的文字無論是在何種密度螢幕,何種解析度下,顯示出來的大小都是差不多的。當然,不只是文字,其他元素像圖片什麼的也是這個道理。
理想視口的寬度一般可以通過以下公式計算: 理想視口的寬度 = 裝置畫素 / dpr
也就是當佈局視口的寬度 等於 裝置獨立畫素的寬度時就是理想視口。
簡單的指定的方法:
<!--這一行程式碼告訴瀏覽器,佈局視口的寬度應該與理想視口的寬度一致-->
<meta name="viewport" content="width=device-width">
或者
<meta name="viewport" content="initial-scale=1">
2.2.4 meta標籤控制佈局視口的縮放
<meta name="viewport" content="initial-scale=1">
為什麼我們指定了meta標籤的viewport縮放比例1也可以實現理想視口呢?
這個比值到底是誰呢?這個值是確定整體網頁縮放的比例。
縮放比 = 理想視口的寬度 / 視覺視口的寬度
也就是說當視覺視口的寬度 和 理想視口的寬度相等時,則就是1。因為手機端的瀏覽器會自動設定佈局視口的寬度為視覺視口的寬度,所以此時:裝置的佈局視口==視覺視口==理想視口。
看一圖就明瞭:
普通螢幕 |
兩倍屏 |
---|---|
視覺視口:當頁面手動放大的時候,使用者可以看到的網頁內容減少,視覺視口的尺寸變小。反之,同理不贅述。
預設的縮放(initial-scale)值設定後,瀏覽器會根據理想視口計算出視覺視口,並設定佈局視口==視覺視口。
但是如果width和initial-scale都設定的時候,瀏覽器會取兩個值較大的,所以可以通過width設定一個最小的佈局視口寬度。
2.3 viewport的其他設定
- maximum-scale 在移動端,你可能會考慮使用者瀏覽不便,然後給予使用者放大頁面的權利,但同時又希望是在一定範圍內的放大,這時就可以使用maximum-scale來進行約束。
- maximum-scale用於指定使用者能夠放大的比例。
舉個例子來講:
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假設頁面的預設縮放值initial-scale是1,那麼使用者最終能夠將頁面放大到這個初始頁面大小的5倍。
- minimum-scale 類似maximum-scale的描述,不過minimum-scale是用來指定頁面縮小比例的。
通常情況下,為了有更好地體驗,不會定義該屬性的值比1更小,因為那樣頁面將變得難以閱讀。
- user-scalable 如果你不想頁面被放大或者縮小,通過定義user-scalable來約束使用者是否可以通過手勢對頁面進行縮放即可。
該屬性的預設值為yes,即可被縮放(如果使用預設值,該屬性可以不定義);當然,如果你的應用不打算讓使用者擁有縮放許可權,可以將該值設定為no。
使用方法如下:
<meta name="viewport" content="user-scalable=no" />