head
title
[强制] 页面必须包含 title
标签声明标题。
[强制] title
必须作为 head
的直接子元素,并紧随 charset
声明之后。
解释:
title
中如果包含 ASCII 之外的字符,浏览器需要知道字符编码类型才能进行解码,否则可能导致乱码。
示例:
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
favicon
[强制] 保证 favicon
可访问。
解释:
在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico
。为了保证 favicon 可访问,避免 404,必须遵循以下两种方法之一:
- 在 Web Server 根目录放置
favicon.ico
文件。 - 使用
link
指定 favicon。
示例:
<link rel="shortcut icon" href="path/to/favicon.ico">
viewport
[建议] 若页面欲对移动设备友好,需指定页面的 viewport
。
解释:
viewport meta tag 可以设置可视区域的宽度和初始缩放大小,避免在移动设备上出现页面展示不正常。
比如,在页面宽度小于 980px
时,若需 iOS 设备友好,应当设置 viewport 的 width
值来适应你的页面宽度。同时因为不同移动设备分辨率不同,在设置时,应当使用 device-width
和 device-height
变量。
另外,为了使 viewport 正常工作,在页面内容样式布局设计上也要做相应调整,如避免绝对定位等。关于 viewport 的更多介绍,可以参见 Safari Web Content Guide的介绍
0 条评论