Web前端入门第 51 问：移动端适配的视口元标签（meta）常见使用场景
经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个这样的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 优化
<title>页面标题</title>
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1,关键词2,关键词3">这三兄弟通常称为网页的 TDK，搜索引擎爬虫会根据 TDK 来判断网页内容，然后进行收录，在需要 SEO 优化的网页，一定要把 TDK 设置好。
当然也可以设置禁止搜索引擎收录：
Open Graph 协议设置
用于设置在社交平台分享时的标题、描述和缩略图等信息。
还有针对 Twitter 分享卡片的设置，国内用的较少，毕竟有墙~~
针对 IE
强制 IE 使用最新渲染引擎
内容安全策略
此部分内容配置很强大的，不止这一种写法，有兴趣可以参考 MDN 相关文档，可配置复杂的 CSP（内容安全策略），防止 XSS 攻击。
Android Chrome 主题色
设置浏览器地址栏或 PWA 应用的主题颜色。
iOS Safari 独有配置
禁止电话号码自动识别
有时候一串数字并不是一个电话号码，在移动端也会被错误的识别为号码，导致影响用户体验，可以使用 meta 标签禁止电话号码识别。
禁止邮箱自动识别
优先使用 HTTPS
将页面内的 HTTP 请求自动升级为 HTTPS。
写在最后
元标签（meta）标签在开发中经常会使用到，本文中都可能没列举全，也许您在某些场景中还用到了其他类型的 meta 标签用法，欢迎留言补充~~
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]