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

掌握web開發基礎系列--長度機關

掌握web開發基礎系列--實體像素、邏輯像素、css像素

思考一下

你知道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大小可以通過拖動調整按鈕改變。

iOS（移動裝置）上浏覽器viewport：決定網頁内容如何布局以及文字如何放置的區域（可想而知其相對于pc會有些複雜）。

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: ; padding: ; }
        .box1 { width: ; height: ; line-height: ; text-align: center; background: greenyellow; }
        .box2 { width: ; height: ; line-height: ; text-align: center; background: lightcoral; }
        .box3 { width: ; height: ; line-height: ; text-align: center; background: lightblue; }
        .box4 { width: ; height: ; line-height: ; 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: ; padding: ; }
        .box1 { width: ; height: ; line-height: ; text-align: center; background: greenyellow; }
        .box2 { width: ; height: ; line-height: ; text-align: center; background: lightcoral; }
        .box3 { width: ; height: ; line-height: ; text-align: center; background: lightblue; }
        .box4 { width: ; height: ; line-height: ; 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值達到裝置給我我們推薦的值時，也就是達到了理想的布局視口，這個過程中用多少個實體像素來表示一個邏輯像素也是随之發生變化的。

參考文章

HTML

<meta>

标簽

說說移動前端中 viewport （視口）

Configuring the Viewport

《CSS像素、實體像素、邏輯像素、裝置像素比、PPI、Viewport》

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

思考一下

移動裝置螢幕分辨率與其邏輯像素

viewport

1、什麼是viewport

2、viewport設定

3、使用 `<meta>` 标簽設定viewport

4、viewport屬性

5、布局視口、虛拟視口、理想視口

總結

參考文章

繼續閱讀

Android 車載之車載投屏~

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

web開發之前後端渲染

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

[轉]iOS微信小視訊優化心得

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

android 主線程的相關問題

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

思考一下

移動裝置螢幕分辨率與其邏輯像素

viewport

1、什麼是viewport

2、viewport設定

3、使用 <meta> 标簽設定viewport

4、viewport屬性

5、布局視口、虛拟視口、理想視口

總結

參考文章

繼續閱讀

3、使用 `<meta>` 标簽設定viewport