移動端開發-viewport

1.viewport

viewport 即設備 屏幕上顯示網頁的區域。由於移動設備屏幕比較小，爲了能讓移動設備可以顯示更多內容，默認設置的viewport 並非屏幕真是像素點的寬度，通常爲980px 寬或者是其餘值（不一樣的設備可能不同），但帶來的後果就是當網頁過寬瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小。

2.像素和物理像素

說到像素和物理像素，就得說一下DPR（devicePixelRatio） 這個詞了，DPR表示屏幕 「顯示像素」 與 「物理像素」 的比值，通常電腦屏幕的 「獨立像素」 等於 「物理像素」。

對於移動端來講，不一樣的設備 DPR也有所不一樣，例如一樣是 360個物理像素寬度的屏幕 ，有可能可以顯示的寬度爲 720px 或者960px ,對應的dpr分別爲720/360 和960/360。

3.使viewport === 設備物理像素寬度

使用meta標籤鎖定視口，強制viewport 等於設備寬度，這樣一來，1px 顯示出來就是1px 。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。

 在html的head標籤內添加這個meta標籤後， 就能夠強制讓viewport 的width 等於設備寬度了 。

參數意義以下

width=device-width ： 強制讓viewport 的width 等於設備寬度

initial-scale=1.0  ： 頁面初始縮放值 ，1.0 即沒有縮放

maximum-scale=1.0  ： 頁面最大縮放值 

user-scalable=no   : 設置頁面是否能夠被用戶縮放，yes 是能夠 ，no 是不能夠 （完）