移动端适配的视口元标签（meta）常见使用场景

经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 `` 这样的HTML元素。 **为什么需要 meta 标签？** 在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看到的网页过小，需要用户手动缩放才能看到网页内容。 在移动端发展过程中，标准逐渐完善，就演变出了 meta 标签的视口设置，用于控制移动端页面的显示大小，以及是否允许缩放等。 ## meta 标签的视口设置 一个完整的视口设置应该包含以下信息： ```html ``` - `width=device-width`：设置视口宽度为设备宽度，表示与设备屏幕宽度相同。 - `initial-scale=1.0`：设置初始缩放比例，页面加载时显示的缩放比例，不放大也不缩小。 - `maximum-scale=5.0`：设置最大缩放比例，用户可以缩放到的最大倍数。 - `minimum-scale=0.5`：设置最小缩放比例，用户可以缩放到的最小倍数。 - `user-scalable=yes`：设置是否允许用户缩放，yes 表示允许缩放。 **禁止用户缩放：** 部分需求场景，比如一些游戏类网站，需要禁止用户缩放，可以这样设置： ```html ``` **固定视口宽度（特殊场景）：** ```html ``` 强制视口宽度为 600px，适合固定尺寸的页面（非响应式设计） **自由缩放查看内容：** 如果网页没有特殊要求，建议设置为允许用户自由缩放查看内容： ```html ``` ## meta 标签其他用法 meta 标签的功能可强大了，好多好多的网页元信息都可以通过它设置。 ### 字符编码声明 ```html ``` 此标签用于声明网页的字符编码，一般使用 utf-8 编码。如果声明的字符编码与网页内容编码不一致，可能会导致乱码。 ### 页面自动刷新或跳转 ```html ``` 使用此标签刷新当前页面需特别注意死循环导致页面不停刷新。 ### SEO 优化 ```html ``` 这三兄弟通常称为网页的 `TDK`，搜索引擎爬虫会根据 TDK 来判断网页内容，然后进行收录，在需要 SEO 优化的网页，一定要把 TDK 设置好。 当然也可以设置禁止搜索引擎收录： ```html ``` ### Open Graph 协议设置 用于设置在社交平台分享时的标题、描述和缩略图等信息。 ```html ``` 还有针对 Twitter 分享卡片的设置，国内用的较少，毕竟有墙~~ ```html ``` ### 针对 IE 强制 IE 使用最新渲染引擎 ```html ``` ### 内容安全策略 ```html ``` 此部分内容配置很强大的，不止这一种写法，有兴趣可以参考 MDN 相关文档，可配置复杂的 CSP（内容安全策略），防止 XSS 攻击。 ### Android Chrome 主题色 设置浏览器地址栏或 PWA 应用的主题颜色。 ```html ``` ### iOS Safari 独有配置 ```html ``` ### 禁止电话号码自动识别 有时候一串数字并不是一个电话号码，在移动端也会被错误的识别为号码，导致影响用户体验，可以使用 meta 标签禁止电话号码识别。 ```html ``` ### 禁止邮箱自动识别 ```html ``` ### 优先使用 HTTPS 将页面内的 HTTP 请求自动升级为 HTTPS。 ```html ``` ## 写在最后 元标签（meta）标签在开发中经常会使用到，本文中都可能没列举全