07-移動端開發教程-移動端視口

標籤：超高清   獨立   lin   .com   編程   尺寸   屬性   最大   勾股定理   

老馬初始學習視口的概念的時候，看了很多的文章，看來很多的資料，鮮有人能把這個東西講的非常透徹的。老馬接下來就從初學者能看懂的角度去講解視口和適配的方案。

1. 關於螢幕1.1 螢幕尺寸

裝置螢幕尺寸是指螢幕的對角線長度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。

1英寸 = 2.54厘米3.5in = 3.5*2.54cm = 8.89cm4.0in = 4.0*2.54cm = 10.16cm4.8in = 4.8*2.54cm = 12.192cm5.0in = 5.0*2.54cm = 12.7cm5.5in = 5.5*2.54cm = 13.97cm6.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(全高清): 19201080解析度，iphone7p就是這個。
4K屏: 也叫QHD或UHD(超高清)，最小解析度是38402160，電視用的多
裝置相機的像素：
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" />

下一節預告：

移動端的適配方案

聯絡老馬

對應視頻地址：https://qtxh.ke.qq.com/
老馬qq： 515154084
老馬：請掃碼

 

感謝您對老馬的支援

07-移動端開發教程-移動端視口