Chaoszhu'Blog

Appearance

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配置:
html
<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes">
<!-- 宽度为设备宽度，初始缩放到最小，允许用户手动缩放 -->

为1时，DOM元素的像素px就是移动设备的逻辑像素(一般设计稿遵循此)，适合转换成vw适配

移动端H5配置:

html
<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已忽略此参数