html之meta标签使用技巧

程序员小蔡

已于 2024-04-29 17:33:41 修改

阅读量302

点赞数

CC 4.0 BY-SA版权

分类专栏：技术杂文文章标签： html 前端

于 2019-06-03 22:13:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39025670/article/details/90760004

技术杂文专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了网页元标签的常见配置，包括编码、浏览器内核选择、视口适配、关键词设定、描述编写，以及如何解决特定浏览器的兼容性和样式错乱问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见配置

<!-- 使用 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="优快云博客,优快云学院,优快云论坛,优快云直播" />

<!-- 内容描述 -->
<meta
  name="description"
  content="优快云是全球知名中文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标签都加上。