经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 这样的HTML元素。

为什么需要 meta 标签？

在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看到的网页过小，需要用户手动缩放才能看到网页内容。

在移动端发展过程中，标准逐渐完善，就演变出了 meta 标签的视口设置，用于控制移动端页面的显示大小，以及是否允许缩放等。

meta 标签的视口设置

一个完整的视口设置应该包含以下信息：

• width=device-width：设置视口宽度为设备宽度，表示与设备屏幕宽度相同。
• initial-scale=1.0：设置初始缩放比例，页面加载时显示的缩放比例，不放大也不缩小。
• maximum-scale=5.0：设置最大缩放比例，用户可以缩放到的最大倍数。
• minimum-scale=0.5：设置最小缩放比例，用户可以缩放到的最小倍数。
• user-scalable=yes：设置是否允许用户缩放，yes 表示允许缩放。

禁止用户缩放：

部分需求场景，比如一些游戏类网站，需要禁止用户缩放，可以这样设置：

固定视口宽度（特殊场景）：

强制视口宽度为 600px，适合固定尺寸的页面（非响应式设计）

自由缩放查看内容：

如果网页没有特殊要求，建议设置为允许用户自由缩放查看内容：

meta 标签其他用法

meta 标签的功能可强大了，好多好多的网页元信息都可以通过它设置。

字符编码声明

此标签用于声明网页的字符编码，一般使用 utf-8 编码。如果声明的字符编码与网页内容编码不一致，可能会导致乱码。

页面自动刷新或跳转

使用此标签刷新当前页面需特别注意死循环导致页面不停刷新。

SEO 优化

这三兄弟通常称为网页的 TDK，搜索引擎爬虫会根据 TDK 来判断网页内容，然后进行收录，在需要 SEO 优化的网页，一定要把 TDK 设置好。

当然也可以设置禁止搜索引擎收录：

Open Graph 协议设置

用于设置在社交平台分享时的标题、描述和缩略图等信息。

还有针对 Twitter 分享卡片的设置，国内用的较少，毕竟有墙~~

针对 IE

强制 IE 使用最新渲染引擎

内容安全策略

此部分内容配置很强大的，不止这一种写法，有兴趣可以参考 MDN 相关文档，可配置复杂的 CSP（内容安全策略），防止 XSS 攻击。

Android Chrome 主题色

设置浏览器地址栏或 PWA 应用的主题颜色。

iOS Safari 独有配置

禁止电话号码自动识别

有时候一串数字并不是一个电话号码，在移动端也会被错误的识别为号码，导致影响用户体验，可以使用 meta 标签禁止电话号码识别。

禁止邮箱自动识别

优先使用 HTTPS

将页面内的 HTTP 请求自动升级为 HTTPS。

写在最后

元标签（meta）标签在开发中经常会使用到，本文中都可能没列举全，也许您在某些场景中还用到了其他类型的 meta 标签用法，欢迎留言补充~~

文章收录于微信公众号【前端路引】，欢迎 微信扫一扫 查看更多文章。

本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18873743