html之meta标签使用技巧

常见配置

<!-- 使用 UTF-8 进行编码 -->
<meta charset="UTF-8">

<!-- 优先使用 IE 最新版本和 chrome 内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 强制使用极速模式（360浏览器有极速模式和兼容模式, 对应关系: webkit 极速模式、ie-comp 兼容模式、ie-stand 标准模式） -->
<meta name="renderer" content="webkit">

<!-- 视口配置, 宽度等于设备宽度, 初始缩放为 1 倍, 最大最小缩放倍率为1, 禁止用户缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<!-- 3 秒后重定向到 https://www.mozilla.org 网站 -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

<!-- 关键词 -->
<meta name="keywords" content="CSDN博客,CSDN学院,CSDN论坛,CSDN直播" />

<!-- 内容描述 -->
<meta
  name="description"
  content="CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区."
/>

viewport-fit 解决iOS设备下视图上移的问题

viewport-fit — iOS11 新增特性，用于设置网页在可视窗口的布局方式（H5应用需要配置），其值包括：

• auto，默认值，与 contain 表现一致;
• contain，可视窗口完全包含网页内容；
• cover，网页内容完全覆盖可视窗口

配置如下：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
/>

以上代码含义：

• 默认视图宽度 为 设备宽度；
• 默认缩放比为 1；
• 最大、最小缩放比为 1；
• 不允许用户手动缩放；
• 网页内容 完全覆盖 可视窗口

其他配置：忽略自动识别

<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no" />

<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no" />

<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no" />

其他配置：去掉 html 的缓存

 对于单页应用，一般不需求缓存 html 页面，可以使用以下方式去掉 html 缓存。（注意：未验证是否有效，在项目中我们一般会在 nginx 上配置不缓存 html）

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />

其他配置：禁止翻译

针对 Chrome 浏览器 在访问我们自己的项目时可以让其不进行 自动翻译

<meta name="google" content="notranslate" />

360浏览器样式错乱问题

原因是使用的是兼容模式，这个模式下360浏览器默认使用的是IE7内核，我们可以加入以下代码兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

代表使用最高版本的IE和chrome内核。

我们还可以强制使用极速模式

<meta name="renderer" content="webkit"> 

但如果我们手动切换为兼容模式还是会出现样式错乱问题，这里建议将上述两个meta标签都加上。