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