配置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

这个页面没有配置viewport。段落内的文字（例如，在标签<p>内）均太小了以致无法阅读。

no-viewport-01.jpg

示例：有配置Viewport

这个网站页面合理配置了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