移動web（二）viewport視口、像素密度
1、視口viewport
以前頁面是直接丟到瀏覽器裏面就直接運行了，但是現在移動端，默認會給頁面添加了一箇中間層，就是頁面和瀏覽器中間會介入一個第三者，就是視口，也就是說視口會把頁面包裹起來然後在放到瀏覽器裏面進行渲染，而視口默認的大小一般是980，會比手機的物理設備的尺寸要大，同時視口會自動縮小到手機的屏幕大小，這就是爲什麼一個PC端的頁面扔到移動端的話並沒有出現滾動條，而是縮小的本質原因。
理解的簡單一點就是在頁面外面包裹了一個默認大小爲980（絕大多數）的盒子，這個盒子具備scale功能，並且同時在默認情況下會整體縮放（裏面承載的網頁也縮小了）到當前用戶手機的屏幕大小，這是視口標籤最開始出來的意義，持續了一段時間，但是發現這種體驗不太好，因爲一旦縮小頁面就會很小看不清，一旦放大就會又看不完全。所以就有人開始做另一種手機網頁模式就是不讓視口標籤去縮放，也不讓用戶去縮放，並且讓視口的寬度就等於當前設備的寬度，就基於當前的屏幕分辨率去設計專門的設計圖，針對差異不大的手機屏幕是採用自適應技術。
【視口標籤的參數】
- width：寬度設置的是viewport寬度，可以設置device-width特殊值
- initial-scale：初始縮放比，大於0的數字（縮放是基於屏幕來的）
- maximum-scale：最大縮放比，大於0的數字
- minimum-scale：最小縮放比，大於0的數字
- user-scalable：用戶是否可以縮放，yes或no（1或0）；
用meta標籤把viewport的寬度設爲device-width，同時initial-scale=1，user-scalable =0就構建了一個標準的移動web頁面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
<title>視口</title>
</head>2、移動端尺寸基礎知識
像素密度
屏幕是由很多像素點組成的。手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。剛好兩倍，然而兩款手機都是3.5英寸的。所以，要引入最重要的一個概念：像素密度，也就是PPI（pixels per inch）。這項指標是連接數字世界與物理世界的橋樑。Pixels per inch，準確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度，等於2.54釐米，大約是食指最末端那根指節的長度。像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因爲它的像素密度翻了一倍。
Retina屏幕把2x2個像素當1個像素使用。比如原本44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質卻更清晰。在以前，iOS應用的資源圖片中，同一張圖通常有兩個尺寸。會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準備好，iOS會自己判斷用哪張，Android道理也一樣。
由此可以看出，蘋果以普通屏爲基準，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達到了3倍）。Retina是一種顯示技術，可以將把更多的像素點壓縮至一塊屏幕裏，從而達到更高的分辨率並提高屏幕顯示的細膩程度。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。