head

  1. title
  2. favicon
  3. viewport

title

[强制] 页面必须包含 title 标签声明标题。

[强制] title 必须作为 head 的直接子元素,并紧随 charset 声明之后。

解释:

title 中如果包含 ASCII 之外的字符,浏览器需要知道字符编码类型才能进行解码,否则可能导致乱码。

示例:


<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

favicon

[强制] 保证 favicon 可访问。

解释:

在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免 404,必须遵循以下两种方法之一:

  1. 在 Web Server 根目录放置 favicon.ico 文件。
  2. 使用 link 指定 favicon。

示例:


<link rel="shortcut icon" href="path/to/favicon.ico">

viewport

[建议] 若页面欲对移动设备友好,需指定页面的 viewport

解释:

viewport meta tag 可以设置可视区域的宽度和初始缩放大小,避免在移动设备上出现页面展示不正常。

比如,在页面宽度小于 980px 时,若需 iOS 设备友好,应当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同移动设备分辨率不同,在设置时,应当使用 device-widthdevice-height 变量。

另外,为了使 viewport 正常工作,在页面内容样式布局设计上也要做相应调整,如避免绝对定位等。关于 viewport 的更多介绍,可以参见 Safari Web Content Guide的介绍

0 条评论