掌握移動web開發基礎系列--viewport

時間 2019-11-06

標籤掌握移動 web 開發基礎系列 viewport 欄目無線简体版

原文原文鏈接

掌握web開發基礎系列--長度單位
 掌握web開發基礎系列--物理像素、邏輯像素、css像素css

思考一下

你知道HTML <meta> 標籤的做用嗎？html

<meta>標籤可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞等，也能夠設置文檔中的viewport。前端

<meta>標籤位於文檔的頭部，不包含任何內容。<meta>標籤的屬性定義了與文檔相關聯的名稱/值對。web

移動設備屏幕分辨率與其邏輯像素

咱們說移動設備的屏幕分辨率，好比iPhone 6是750dp * 1334dp，指的是屏幕橫向每行有750個像素點，垂直方向每列有1334個像素點。瀏覽器

咱們經過使用 screen.width和 screen.height檢測出來的值是 375px * 667px，那麼這個值是其邏輯像素。至於移動設備的物理像素到邏輯像素的轉換過程，在這裏咱們不探討。

viewport

《Configuring the Viewport》這篇文檔中詳細介紹了什麼是viewport及其相關配置，該文檔是針對iOS系統的移動設備作出的陳述，其實也適用於Android設備。下面會對該文檔作一下簡單總結。app

一、什麼是viewport

pc瀏覽器viewport：瀏覽器中網頁的可視區域。ide

viewport在pc上和iOS上有輕微不一樣。在iOS上面的Safari沒有窗口、滾動條以及調整窗口大小的按鈕。也就是說pc上的viewport大小能夠經過拖動調整按鈕改變。佈局

iOS（移動設備）上瀏覽器viewport：決定網頁內容如何佈局以及文字如何放置的區域（ 可想而知其相對於pc會有些複雜）。

二、viewport設置

iOS上面的Safari爲了讓大部分（來自pc端的）網頁顯示效果更好，作了一些合理的默認設置。好比設置默認的width是980px，固然這個設置不可能會是全部網頁都展示的很好，這時就須要本身親手設置viewport了。width屬性被用來控制佈局視口（layout viewport）的寬度，佈局視口寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口寬度設置爲 980px。post

移動設備瀏覽器怎麼按照默認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這樣展現網頁字體過小看的很不清楚，（設備）是不推薦這樣作的。

三、使用`<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）。

四、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存在，感興趣的同窗本身去研究啦。

五、佈局視口、虛擬視口、理想視口

ppk大神對於移動設備上的viewport有着很是多的研究（第一篇，第二篇，第三篇），有興趣的同窗能夠去看一下，本文中有不少數據和觀點也是出自那裏。ppk認爲，移動設備上有三個viewport，即佈局視口（layout viewport）、虛擬視口（visual viewport）、理想視口（ideal viewport）。《CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport》這篇文章的第8部分就對ppk的三種viewport作出了介紹。

不少概念誰最早提出或者定義誰就最理解它。後人理解某些概念是或多或少會有些誤差。

只有動手測試一下，才能更加深刻的理解相關知識點。

總結

viewport對於移動設備瀏覽器頁面佈局來講是很是重要的，它其實就是根據設置width屬性的值來控制當前窗口寬度可以存放多少的邏輯（css）像素，width的值越大，存放的邏輯像素越多，那麼對應真實的DPR值也就越小，當真實的DPR值達到設備給我咱們推薦的值時，也就是達到了理想的佈局視口，這個過程當中用多少個物理像素來表示一個邏輯像素也是隨之發生變化的。