Web前端入门第 51 问：移动端适配的视口元标签（meta）常见使用场景
<p>经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 <code><meta name="viewport" xxx></code> 这样的HTML元素。</p><p><strong>为什么需要 meta 标签？</strong></p>
<p>在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看到的网页过小，需要用户手动缩放才能看到网页内容。</p>
<p>在移动端发展过程中，标准逐渐完善，就演变出了 meta 标签的视口设置，用于控制移动端页面的显示大小，以及是否允许缩放等。</p>
<h2 id="meta-标签的视口设置">meta 标签的视口设置</h2>
<p>一个完整的视口设置应该包含以下信息：</p>
<pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes">
</code></pre>
<ul>
<li><code>width=device-width</code>：设置视口宽度为设备宽度，表示与设备屏幕宽度相同。</li>
<li><code>initial-scale=1.0</code>：设置初始缩放比例，页面加载时显示的缩放比例，不放大也不缩小。</li>
<li><code>maximum-scale=5.0</code>：设置最大缩放比例，用户可以缩放到的最大倍数。</li>
<li><code>minimum-scale=0.5</code>：设置最小缩放比例，用户可以缩放到的最小倍数。</li>
<li><code>user-scalable=yes</code>：设置是否允许用户缩放，yes 表示允许缩放。</li>
</ul>
<p><strong>禁止用户缩放：</strong></p>
<p>部分需求场景，比如一些游戏类网站，需要禁止用户缩放，可以这样设置：</p>
<pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</code></pre>
<p><strong>固定视口宽度（特殊场景）：</strong></p>
<pre><code class="language-html"><meta name="viewport" content="width=600">
</code></pre>
<p>强制视口宽度为 600px，适合固定尺寸的页面（非响应式设计）</p>
<p><strong>自由缩放查看内容：</strong></p>
<p>如果网页没有特殊要求，建议设置为允许用户自由缩放查看内容：</p>
<pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1">
</code></pre>
<h2 id="meta-标签其他用法">meta 标签其他用法</h2>
<p>meta 标签的功能可强大了，好多好多的网页元信息都可以通过它设置。</p>
<h3 id="字符编码声明">字符编码声明</h3>
<pre><code class="language-html"><meta charset="utf-8">
</code></pre>
<p>此标签用于声明网页的字符编码，一般使用 utf-8 编码。如果声明的字符编码与网页内容编码不一致，可能会导致乱码。</p>
<h3 id="页面自动刷新或跳转">页面自动刷新或跳转</h3>
<pre><code class="language-html"><!-- 5秒后刷新当前页面 -->
<meta http-equiv="refresh" content="5">
<!-- 3秒后跳转到百度 -->
<meta http-equiv="refresh" content="3; url=https://www.baidu.com">
</code></pre>
<p>使用此标签刷新当前页面需特别注意死循环导致页面不停刷新。</p>
<h3 id="seo-优化">SEO 优化</h3>
<pre><code class="language-html"><title>页面标题</title>
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1,关键词2,关键词3">
</code></pre>
<p>这三兄弟通常称为网页的 <code>TDK</code>，搜索引擎爬虫会根据 TDK 来判断网页内容，然后进行收录，在需要 SEO 优化的网页，一定要把 TDK 设置好。</p>
<p>当然也可以设置禁止搜索引擎收录：</p>
<pre><code class="language-html"><!-- noindex: 禁止索引本页
nofollow: 禁止跟踪本页链接
noarchive: 禁止显示快照 -->
<meta name="robots" content="noindex, nofollow">
</code></pre>
<h3 id="open-graph-协议设置">Open Graph 协议设置</h3>
<p>用于设置在社交平台分享时的标题、描述和缩略图等信息。</p>
<pre><code class="language-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">
</code></pre>
<p>还有针对 Twitter 分享卡片的设置，国内用的较少，毕竟有墙~~</p>
<pre><code class="language-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">
</code></pre>
<h3 id="针对-ie">针对 IE</h3>
<p>强制 IE 使用最新渲染引擎</p>
<pre><code class="language-html"><meta http-equiv="X-UA-Compatible" content="IE=edge">
</code></pre>
<h3 id="内容安全策略">内容安全策略</h3>
<pre><code class="language-html"><!-- 禁止内容混合加载（HTTP/HTTPS 混合内容） -->
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
</code></pre>
<p>此部分内容配置很强大的，不止这一种写法，有兴趣可以参考 MDN 相关文档，可配置复杂的 CSP（内容安全策略），防止 XSS 攻击。</p>
<h3 id="android-chrome-主题色">Android Chrome 主题色</h3>
<p>设置浏览器地址栏或 PWA 应用的主题颜色。</p>
<pre><code class="language-html"><meta name="theme-color" content="#000000">
</code></pre>
<h3 id="ios-safari-独有配置">iOS Safari 独有配置</h3>
<pre><code class="language-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">
</code></pre>
<h3 id="禁止电话号码自动识别">禁止电话号码自动识别</h3>
<p>有时候一串数字并不是一个电话号码，在移动端也会被错误的识别为号码，导致影响用户体验，可以使用 meta 标签禁止电话号码识别。</p>
<pre><code class="language-html"><meta name="format-detection" content="telephone=no">
</code></pre>
<h3 id="禁止邮箱自动识别">禁止邮箱自动识别</h3>
<pre><code class="language-html"><meta name="format-detection" content="email=no">
</code></pre>
<h3 id="优先使用-https">优先使用 HTTPS</h3>
<p>将页面内的 HTTP 请求自动升级为 HTTPS。</p>
<pre><code class="language-html"><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</code></pre>
<h2 id="写在最后">写在最后</h2>
<p>元标签（meta）标签在开发中经常会使用到，本文中都可能没列举全，也许您在某些场景中还用到了其他类型的 meta 标签用法，欢迎留言补充~~</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18873743</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18873743
頁:
[1]