經常查看網頁源碼的同學應該都有注意到，基本上面向移動端的所有網站都有個 <meta name="viewport" xxx> 這樣的HTML元素。

為什么需要 meta 標簽？

在移動端剛起步的時候，默認網頁是以 PC 端的寬度渲染，這就導致用戶看到的網頁過小，需要用戶手動縮放才能看到網頁內容。

在移動端發展過程中，標準逐漸完善，就演變出了 meta 標簽的視口設置，用于控制移動端頁面的顯示大小，以及是否允許縮放等。

meta 標簽的視口設置

一個完整的視口設置應該包含以下信息：

<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 表示允許縮放。

禁止用戶縮放：

部分需求場景，比如一些游戲類網站，需要禁止用戶縮放，可以這樣設置：

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

固定視口寬度（特殊場景）：

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

強制視口寬度為 600px，適合固定尺寸的頁面（非響應式設計）

自由縮放查看內容：

如果網頁沒有特殊要求，建議設置為允許用戶自由縮放查看內容：

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

meta 標簽其他用法

meta 標簽的功能可強大了，好多好多的網頁元信息都可以通過它設置。

字符編碼聲明

<meta charset="utf-8">

此標簽用于聲明網頁的字符編碼，一般使用 utf-8 編碼。如果聲明的字符編碼與網頁內容編碼不一致，可能會導致亂碼。

頁面自動刷新或跳轉

<!-- 5秒后刷新當前頁面 -->
<meta http-equiv="refresh" content="5">
<!-- 3秒后跳轉到百度 -->
<meta http-equiv="refresh" content="3; url=https://www.baidu.com">

使用此標簽刷新當前頁面需特別注意死循環導致頁面不停刷新。

SEO 優化

<title>頁面標題</title>
<meta name="description" content="頁面描述">
<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3">

這三兄弟通常稱為網頁的 TDK，搜索引擎爬蟲會根據 TDK 來判斷網頁內容，然后進行收錄，在需要 SEO 優化的網頁，一定要把 TDK 設置好。

當然也可以設置禁止搜索引擎收錄：

<!-- noindex: 禁止索引本頁
nofollow: 禁止跟蹤本頁鏈接
noarchive: 禁止顯示快照 -->
<meta name="robots" content="noindex, nofollow">

Open Graph 協議設置

用于設置在社交平臺分享時的標題、描述和縮略圖等信息。

<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 分享卡片的設置，國內用的較少，畢竟有墻~~

<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 使用最新渲染引擎

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

內容安全策略

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

此部分內容配置很強大的，不止這一種寫法，有興趣可以參考 MDN 相關文檔，可配置復雜的 CSP（內容安全策略），防止 XSS 攻擊。

Android Chrome 主題色

設置瀏覽器地址欄或 PWA 應用的主題顏色。

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

iOS Safari 獨有配置

<!-- 啟用 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 標簽禁止電話號碼識別。

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

禁止郵箱自動識別

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

優先使用 HTTPS

將頁面內的 HTTP 請求自動升級為 HTTPS。

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

?轉自https://www.cnblogs.com/linx/p/18873743