掌握移動web開發基礎系列--viewport
你知道HTML <meta> 標籤的作用嗎？
<meta> 標籤可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞等，也可以設定文件中的viewport。
<meta> 標籤位於文件的頭部，不包含任何內容。 <meta> 標籤的屬性定義了與文件相關聯的名稱/值對。
移動裝置螢幕解析度與其邏輯畫素
我們說移動裝置的螢幕解析度，比如iPhone 6是 750dp * 1334dp ，指的是螢幕橫向每行有750個畫素點，垂直方向每列有1334個畫素點。
screen.width 和
screen.height 檢測出來的值是
375px * 667px
，那麼這個值是其邏輯畫素。至於移動裝置的物理畫素到邏輯畫素的轉換過程，在這裡我們不探討。
viewport
《Configuring the Viewport》 這篇文件中詳細介紹了什麼是 viewport 及其相關配置，該文件是針對iOS系統的移動裝置做出的陳述，其實也適用於Android裝置。下面會對該文件做一下簡單總結。
1、什麼是viewport
pc瀏覽器viewport：瀏覽器中網頁的可視區域。
viewport在pc上和iOS上有輕微不同。在iOS上面的Safari沒有視窗、滾動條以及調整視窗大小的按鈕。也就是說pc上的viewport大小可以通過拖動調整按鈕改變。
）。
2、viewport設定
iOS上面的Safari為了讓大部分（來自pc端的）網頁顯示效果更好，做了一些合理的預設設定。比如設定預設的 width 是 980px ，當然這個設定不可能會是所有網頁都展現的很好，這時就需要自己親手設定viewport了。 width 屬性被用來控制佈局視口（layout viewport）的寬度，佈局視口寬度預設值是裝置廠家指定的。iOS, Android基本都將這個視口寬度設定為 980px 。
移動裝置瀏覽器怎麼按照預設 viewport 展示網頁？
把文件中 <meta name="viewport"> 去掉就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body { margin: 0; padding: 0; }
.box1 { width: 375px; height: 100px; line-height: 100px; text-align: center; background: greenyellow; }
.box2 { width: 750px; height: 100px; line-height: 100px; text-align: center; background: lightcoral; }
.box3 { width: 950px; height: 100px; line-height: 100px; text-align: center; background: lightblue; }
.box4 { width: 980px; height: 100px; line-height: 100px; text-align: center; background: lightslategray; }
</style>
</head>
<body>
<div class="box1">375px</div>
<div class="box2">750px</div>
<div class="box3">950px</div>
<div class="box4">980px</div>
</body>
</html>
複製程式碼
不設定 <meta name="viewport"> ，此時移動裝置瀏覽器將按照預設的 width 是 980px 展示網頁。
此時的DPR是多少呢？
當前瀏覽器寬度為 980px ，那麼
DPR = 物理畫素 / 邏輯畫素 = 750/980 = 0.765。
大家肯定會說圖中明明顯示了DPR=2.0，對，圖中顯示的值是當前裝置正常顯示（就是在我們人眼能看清楚）邏輯畫素應該有的值。如果按照DPR=0.765這樣展示網頁字型太小看的很不清楚，（裝置）是不推薦這樣做的。
3、使用 <meta> 標籤設定viewport
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--下面這個配置很重要-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body { margin: 0; padding: 0; }
.box1 { width: 375px; height: 100px; line-height: 100px; text-align: center; background: greenyellow; }
.box2 { width: 750px; height: 100px; line-height: 100px; text-align: center; background: lightcoral; }
.box3 { width: 950px; height: 100px; line-height: 100px; text-align: center; background: lightblue; }
.box4 { width: 980px; height: 100px; line-height: 100px; text-align: center; background: lightslategray; }
</style>
</head>
<body>
<div class="box1">375px</div>
<div class="box2">750px</div>
<div class="box3">950px</div>
<div class="box4">980px</div>
</body>
</html>
複製程式碼
設定 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ，此時移動裝置瀏覽器將按照的 width 是 device-width 展示網頁。
375px
的元素，所以已經出現橫向滾動條。
此時的DPR是多少呢？
當前瀏覽器寬度為 device-width 也就是 375px ，那麼
DPR = 物理畫素 / 邏輯畫素 = 750/375 = 2。
經過設定viewport，網頁已經達到了最優展示效果。
如果 width 等於其他值會是什麼樣的情況呢？
由於使用Chrome瀏覽器中的移動裝置模擬器測試過程因多次修改viewport相關屬性出現了效果不能及時更新的問題，下面我們使用iPhone 6 plus真機上Safari瀏覽器進行了關於 width 取不同值情況下頁面展示效果的測試。
<!--case 1--> <meta name="viewport" content="320"> <!--case 2--> <meta name="viewport" content="375"> <!--case 3--> <meta name="viewport" content="width=device-width"> <!--case 4 註釋下面設定--> <!--<meta name="viewport" content="width=device-width">--> 複製程式碼
從上面頁面顯示效果圖可以得到下面結論。
- 移動裝置上，如果頁面文件不設定viewport，則當前瀏覽器視窗寬度按照預設
980px進行佈局。 - 移動裝置上，如果頁面文件設定viewport中的
width屬性的值，則當前瀏覽器視窗寬度按照該值進行佈局。 - 移動裝置上，頁面文件設定了設定viewport中的
width屬性的值，那麼頁面中元素的顯示會隨著該值的增大而變小。
我們想象一下，移動裝置的螢幕大小是固定的，我們將viewport的 width 屬性值設大，頁面就會展示更多的資訊，那麼頁面中相應的元素顯示效果就會變小。那麼在這個過程中會有一個最優的階段，就是 width 屬性值等於 device-width 的時候，我們很多人此時的視口成為 理想視口 （ideal viewport）。
4、viewport屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| 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 |
這裡有幾種情況需要注意，以iPhone 6 plus為例，其理想視口寬為 414px 高為 736px ：
<meta name="viewport" content="width=375, initial-scale=1.0"> 複製程式碼
上面情況width和initial-scale同時存在，且設定值375小於理想值414，那麼會按照理想值414正常佈局展示。
<meta name="viewport" content="width=device-width, initial-scale=1.5"> 複製程式碼
上面設定會按照當前device-width即理想值414進行1.5倍放大展示，並出現橫向滾動條。
或許還有其他case存在，感興趣的同學自己去研究啦。
5、佈局視口、虛擬視口、理想視口
ppk大神對於移動裝置上的viewport有著非常多的研究（第一篇， 第二篇 ，第三篇），有興趣的同學可以去看一下，本文中有很多資料和觀點也是出自那裡。ppk認為，移動裝置上有三個viewport，即佈局視口（layout viewport）、虛擬視口（visual viewport）、理想視口（ideal viewport）。 《CSS畫素、物理畫素、邏輯畫素、裝置畫素比、PPI、Viewport》 這篇文章的第8部分就對ppk的三種viewport做出了介紹。
很多概念誰最先提出或者定義誰就最理解它。後人理解某些概念是或多或少會有些偏差。
只有動手測試一下，才能更加深入的理解相關知識點。
總結
viewport對於移動裝置瀏覽器頁面佈局來說是非常重要的，它其實就是根據設定 width 屬性的值來控制當前視窗寬度能夠存放多少的邏輯（css）畫素， width 的值越大，存放的邏輯畫素越多，那麼對應真實的DPR值也就越小，當真實的DPR值達到裝置給我我們推薦的值時，也就是達到了理想的佈局視口，這個過程中用多少個物理畫素來表示一個邏輯畫素也是隨之發生變化的。