配置Viewport


第二部分 – 第02章

Viewport

針對移動設備進行優化的網站頁面均在head部分配置了viewport 。

Viewport

設想viewport是一個顯示網站頁面的窗口。如今,用戶在不同屏幕尺寸的設備上訪問網站頁面。為了使你的網站頁面正確地在用戶面前展示,通過一個適當配置的viewport可以明確將要顯示的窗口大小。

讓我們明確Viewport相關參數和取值:

width=device-width, initial-scale=1

完整的viewport META標籤合起來如下:

<head>
  <meta name=viewport content="width=device-width, initial-scale=1">
</head>
  • width是設備上虛擬視圖的寬度。
  • device-width是指設備屏幕的物理寬度。
  • initial-scale是被訪問時網頁的初始縮放大小。 1或1.0意味著“不進行縮放”。

沒有配置Viewport vs. 有配置Viewport

讓我們證明為移動設備/屏幕配置合適的viewport的重要性。

示例:沒有配置Viewport

例如,網站頁面的URL為:

http://www.gordonchoi.com/viewport-samples/no-viewport-example.html

這個頁面沒有配置viewport。段落內的文字(例如,在標籤<p>內)均太小了以致無法閱讀。

no-viewport-01.jpg

示例:有配置Viewport

例如,網站頁面的URL為:

http://www.gordonchoi.com/viewport-samples/viewport-example.html

這個網站頁面合理配置了viewport。現在段落內的文字(例如,在標籤<p>內)均可以閱讀了。

viewport-configured-01.jpg

為HTML5頁面增加Viewport

讓我們為網站頁面的HTML代碼加上viewport。

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://www.example.com/css/stylesheet.css">
  <script src=" http://www.example.com/js/scripts.js"></script>
</head>
<body>
  <h1></h1>
  <p></p>
</body>
</html>


移動網站性能技術白皮書在2017年3月正式出版。

英文版:Configure Viewport – 簡體中文版:配置Viewport







移動網站性能技術白皮書上的內容按下列許可協議發布:CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book