meta标签作用
head标签用于定于文档头部信息。head中的元素可以
引用脚本、指示浏览器在哪里找到样式表、提供元信息
等等。
非必要属性值(代表设置的项):http-equiv、name
必要属性值(代表设置的值):content
http-equiv
常见的可设置项有:
Content-Security-Policy内容安全策略 参见阮一峰大佬文章
自动将http升级为https请求
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
content-type 文档编码
<meta http-equiv="content-type" content="text/html charset=utf8">
expires 缓存时间
<meta http-equiv="expires" content="31 Dec 2021">
refresh 3秒后自动刷新
<meta http-equiv="refresh" content="3>
set-cookie
name
author用来标注网页的作者
<meta name="author" content="chaoszhu">
description 网页描述(seo优化)
<meta name="description" content="description">
keywords 网页关键词(seo优化)
<meta name="keywords" content="key word">
robots 指定蜘蛛爬取指定页面
<meta name="robots" content="all">
viewport
网页视窗配置,目前仅作用于移动设备; content常用字段如下:
width: 视窗宽度;一个正整数,或者字符串
device-width
initial-scale: 初始缩放比例; 取值0-10
注意:viewport属性值仅在移动设备生效
为0时,pc端网页会完整缩放在移动端H5页面;但移动端像素遵循移动设备的物理像素,设备分辨率越高,1px表现就越小
- PC端缩放到移动端H5配置:
<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes">
<!-- 宽度为设备宽度,初始缩放到最小,允许用户手动缩放 -->
为1时,DOM元素的像素px就是移动设备的逻辑像素(一般设计稿遵循此),适合转换成vw适配
移动端H5配置:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- 宽度为设备宽度,初始缩放为1(即不变,与device-width保持一致),禁止用户手动缩放 -->
user-scalable: 用户是否可以手动缩放; 取值yes 或者 no
maximum-scale: 允许用户缩放到的最大比例 IOS10已忽略此参数
minimum-scale: 允许用户缩放到的最小比例 IOS10已忽略此参数