Web前端入门第 51 问：移动端适配的视口元标签（meta）常见使用场景

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

为什么需要 meta 标签？

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

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

meta 标签的视口设置

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

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes">

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

禁止用户缩放：

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

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

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

html 复制代码

<meta name="viewport" content="width=600">

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

自由缩放查看内容：

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

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1">

meta 标签其他用法

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

字符编码声明

html 复制代码

<meta charset="utf-8">

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

页面自动刷新或跳转

html 复制代码

<!-- 5秒后刷新当前页面 -->
<meta http-equiv="refresh" content="5">

<!-- 3秒后跳转到百度 -->
<meta http-equiv="refresh" content="3; url=https://www.baidu.com">

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

SEO 优化

html 复制代码

<title>页面标题</title>
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1,关键词2,关键词3">

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

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

html 复制代码

<!-- noindex: 禁止索引本页
nofollow: 禁止跟踪本页链接
noarchive: 禁止显示快照 -->
<meta name="robots" content="noindex, nofollow">

Open Graph 协议设置

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

html 复制代码

<meta property="og:title" content="文章标题">
<meta property="og:description" content="文章简介">
<meta property="og:image" content="https://example.com/xxxx.jpg">
<meta property="og:url" content="https://example.com/page-url">

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

html 复制代码

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitter用户名">
<meta name="twitter:title" content="推文标题">
<meta name="twitter:description" content="推文描述">
<meta name="twitter:image" content="https://example.com/xxx.jpg">

针对 IE

强制 IE 使用最新渲染引擎

html 复制代码

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

内容安全策略

html 复制代码

<!-- 禁止内容混合加载（HTTP/HTTPS 混合内容） -->
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">

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

Android Chrome 主题色

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

html 复制代码

<meta name="theme-color" content="#000000">

iOS Safari 独有配置

html 复制代码

<!-- 启用 Web App 模式（全屏、隐藏浏览器UI） -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 定义状态栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- 指定启动图标 -->
<link rel="apple-touch-icon" href="/icon.png">

禁止电话号码自动识别

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

html 复制代码

<meta name="format-detection" content="telephone=no">

禁止邮箱自动识别

html 复制代码

<meta name="format-detection" content="email=no">

优先使用 HTTPS

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

html 复制代码

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

写在最后

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