【移動端web開發】（二）深刻viewport

前言

經過上一篇咱們已經大概明白viewport是什麼，可是viewport並無那麼簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓咱們一塊兒看看吧！

三個viewport

ppk認爲，有三個viewport

1. layout viewport

• 咱們先回想一下，當有一個爲PC端設計的網頁想要放在移動端瀏覽的時候，若是咱們以瀏覽器的可視窗口做爲viewport，那因爲移動端的屏幕很小，因此這個網頁必然會由於viewport過小而擠在一塊兒致使沒法正常顯示網頁，甚至佈局會亂掉。因此這些瀏覽器就決定默認狀況下把viewport設爲一個較寬的值，如iphone把viewport設爲980px，經過這個viewport移動端的瀏覽器就能夠把整個網頁顯示在手機屏幕上，可是整個網頁是被縮小的。ppk把這個瀏覽器默認的viewport叫作 layout viewport,咱們看一下這張圖就明白了。

咱們能夠經過
document.documentElement.clientWidth來得到佈局視窗的寬和高。

2. visual viewport

• 然而，layout viewport 的寬度是大於瀏覽器可視區域的寬度的，因此咱們還須要一個viewport來表明 瀏覽器可視區域的大小，ppk把這個viewport叫作 visual viewport。如圖：

用window.innerWidth/Height或者document.documentElement.offsetWidth計算visual viewport的寬度

注意，visual viewport尺寸所對應的並非指屏幕區域裏的物理像素，而是CSS 像素。而且它所包含的 CSS 像素的數量也是隨着用戶縮放而有所改變。

layout viewport和visual viewport

• 當進行縮放（若是你放大，屏幕上的CSS像素會變少）的時候，visual viewport(就是頁面當前顯示在屏幕上的部分)的尺寸會發生變化，layout viewport的尺寸仍然跟以前的同樣。
• visual viewport就像一個框，layout viewport就像一張紙，也就是紙上有一個框，框對準紙的哪一個部分，你就能看見哪一個部分（假設框外部分不可見）。你能夠把框靠近或遠離紙（調整縮放比例），也能夠改變框的位置（調整滾輪），這些方法均可以改變visual viewport，可是layout viewport始終不變。

visual viewport用css像素來衡量尺寸，表示有多少個css像素可以被用戶看到。

• 當你進行頁面放大的時候，本來在未縮放的頁面上看起來很小的尺寸，如今經過viewport看上去變大了，事實上這部分的css的px值並無變化，僅僅是由於進行放大後，css的1px的值所佔的屏幕分辨率的值變大了。同理，當你縮小整個頁面的時候本來看起來很大的尺寸，如今再經過viewport看上去的時候又變小了。同理,css的1px的值並無發生變化,可是1px值所佔的屏幕分辨率的值變小了。因此，放大的時候，css像素個數減小，visual viewport尺寸減少，縮小的時候，css像素個數增多，，visual viewport尺寸增大

3. ideal viewport

• 如今咱們已經有兩個viewport了：layout viewport 和 visual viewport。可是因爲原網頁會在咱們的移動端縮小，若是咱們須要看清文字，咱們每每放大才能夠看清字，但是當咱們放大的時候，又沒辦法看到整個網頁，這時想瀏覽整個網頁，咱們又不得不左右滑動屏幕（橫向滾動條）。
• 因而咱們必須還要有一個能完美適配移動設備的viewport，所謂的完美適配指的是，首先不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容，另外顯示的文字的大小是合適，好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。固然，不僅是文字，其餘元素像圖片什麼的也是這個道理。ppk把這個viewport叫作 ideal viewport，也就是第三個viewport——移動設備的理想viewport。
• ideal viewport並無一個固定的尺寸，不一樣的設備擁有有不一樣的ideal viewport。全部的iphone的ideal viewport寬度都是320px，不管它的屏幕寬度是320仍是640，也就是說，在iphone中，css中的320px就表明iphone屏幕的寬度。可是安卓設備就比較複雜了，有320px的，有360px的，有384px的等等。

總結一下：ppk把移動設備上的viewport分爲layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元素的寬度設爲ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是設備屏幕的寬度了，也就是寬度爲100%的效果。從另外一角度看，idea viewport其實就是改變了尺寸layout viewport，idae viewport其實就是把layoutviewport調整到一個合適的，理想的狀態，使頁面在移動端有最佳的顯示效果，即不管在何種分辨率的屏幕下，那些針對ideal viewport 而設計的網站，不須要用戶手動縮放，也不須要橫向滾動條就能夠完美地呈現給用戶。 那麼如何把layout viewport調整到idea viewport呢，下面咱們來看一下：

把當前的viewport寬度設置爲 ideal viewport 的寬度

怎麼設置呢？看看這段代碼：

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

相信有作過移動端開發的同窗都熟悉這段代碼，無論你是否是熟悉移動端開發的原理，像我以前同樣，不懂viewport，像素是啥，可是我把這段代碼寫進了haed標籤裏，其實就成功了一半。
沒錯，這段代碼就是把把默認的layout viewport的寬度設爲移動設備的屏幕寬度，也就是把當前的viewport寬度設置爲 ideal viewport 的寬度。

咱們來看看各個屬性是什麼意思：

• width：設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
• initial-scale：設置頁面的初始縮放值，爲一個數字，能夠帶小數
• minimum-scale：容許用戶的最小縮放值，爲一個數字，能夠帶小數
• maximum-scale：容許用戶的最大縮放值，爲一個數字，能夠帶小數
• height：設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用
• user-scalable：是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

這些屬性能夠同時使用，也能夠單獨使用或混合使用，多個屬性同時使用時用逗號隔開就好了。

width=device-width

width屬性被用來控制layout viewport（佈局視口）的寬度，layout viewport（佈局視口）寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口分辨率設置爲 980px。咱們能夠 width=320 這樣設爲確切的像素數，也能夠設爲device-width這一特殊值，通常爲了自適應佈局，廣泛的作法是將width設置爲device-width，width=device-width 也就是將layout viewport（佈局視口）的寬度設置 ideal viewport（理想視口）的寬度。

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

能夠看到經過width=device-width，全部瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。

initial-scale=1

initial-scale用於指定頁面的初始縮放比例，縮放是相對於 ideal viewport來進行縮放的，所以當initial-scale=1時，表示將layout viewport的寬度設置爲 ideal viewport的寬度。

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

能夠知道initial-scale=1 也能把當前的viewport寬度變成 ideal viewport 的寬度，但此次輪到了windows phone 上的IE 不管是豎屏仍是橫屏都把寬度設爲豎屏時ideal viewport的寬度。

綜上，要把當前的viewport寬度設爲ideal viewport的寬度，既能夠設置 width=device-width，也能夠設置 initial-scale=1，但這二者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，統統以豎屏的ideal viewport寬度爲準。因此，最完美的寫法應該是，二者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病。

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

width 和 initial-scale=1同時出現，而且還出現了衝突呢

當遇到這種狀況時，瀏覽器會取它們兩個中較大的那個值。例如，當width=400，ideal viewport的寬度爲320時，取的是400；當width=400， ideal viewport的寬度爲480時，取的是ideal viewport的寬度。

關於minimum-scale=1, maximum-scale=1，user-scalable=no

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

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

能夠看到第二段代碼咱們把minimum-scale=1, maximum-scale=1這兩個屬性去掉了，但效果是同樣的，由於添加了user-scalable=no 那麼，minimum-scale=1, maximum-scale=1這兩個屬性就不必追加了。由於你都已經禁止了用戶縮放頁面了，容許的縮放範圍也就不存在了。

總結

1. 全部的scale指令都是相對於ideal viewport的。無視layout viewport設置了多少，因此maximum-scale=3意味着最大的縮放值是ideal viewport的300%
2. layout viewport能被設置成ideal viewport。width=device-width和initial-scale=1指令能夠作到。
3. 針對某個設備的ideal viewport而作出的網站，在其餘設備上的表現也不會相差很是多甚至是表現同樣的，這是由於市場上雖然有不一樣分辨率，不一樣型號的手機，可是他們的ideal viewport是十分接近的。
4. ideal viewport會隨設備轉向而改變。如Iphone 5s 尺寸爲320*568。在豎屏模式下寬度爲320px，而在橫屏模式下寬度爲568px。

參考文章

1. https://www.cnblogs.com/2050/...
2. http://yunkus.com/meta-viewpo...
3. https://blog.csdn.net/as11720...

（寫到這裏要吐血了哈哈）