經(jīng)常查看網(wǎng)頁(yè)源碼的同學(xué)應(yīng)該都有注意到，基本上面向移動(dòng)端的所有網(wǎng)站都有個(gè) <meta name="viewport" xxx> 這樣的HTML元素。
為什么需要 meta 標(biāo)簽？
在移動(dòng)端剛起步的時(shí)候，默認(rèn)網(wǎng)頁(yè)是以 PC 端的寬度渲染，這就導(dǎo)致用戶(hù)看到的網(wǎng)頁(yè)過(guò)小，需要用戶(hù)手動(dòng)縮放才能看到網(wǎng)頁(yè)內(nèi)容。
在移動(dòng)端發(fā)展過(guò)程中，標(biāo)準(zhǔn)逐漸完善，就演變出了 meta 標(biāo)簽的視口設(shè)置，用于控制移動(dòng)端頁(yè)面的顯示大小，以及是否允許縮放等。
一個(gè)完整的視口設(shè)置應(yīng)該包含以下信息：
<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：設(shè)置視口寬度為設(shè)備寬度，表示與設(shè)備屏幕寬度相同。initial-scale=1.0：設(shè)置初始縮放比例，頁(yè)面加載時(shí)顯示的縮放比例，不放大也不縮小。maximum-scale=5.0：設(shè)置最大縮放比例，用戶(hù)可以縮放到的最大倍數(shù)。minimum-scale=0.5：設(shè)置最小縮放比例，用戶(hù)可以縮放到的最小倍數(shù)。user-scalable=yes：設(shè)置是否允許用戶(hù)縮放，yes 表示允許縮放。
禁止用戶(hù)縮放：
部分需求場(chǎng)景，比如一些游戲類(lèi)網(wǎng)站，需要禁止用戶(hù)縮放，可以這樣設(shè)置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
固定視口寬度（特殊場(chǎng)景）：
<meta name="viewport" content="width=600">
強(qiáng)制視口寬度為 600px，適合固定尺寸的頁(yè)面（非響應(yīng)式設(shè)計(jì)）
自由縮放查看內(nèi)容：
如果網(wǎng)頁(yè)沒(méi)有特殊要求，建議設(shè)置為允許用戶(hù)自由縮放查看內(nèi)容：
<meta name="viewport" content="width=device-width, initial-scale=1">
meta 標(biāo)簽的功能可強(qiáng)大了，好多好多的網(wǎng)頁(yè)元信息都可以通過(guò)它設(shè)置。
字符編碼聲明
<meta charset="utf-8">
此標(biāo)簽用于聲明網(wǎng)頁(yè)的字符編碼，一般使用 utf-8 編碼。如果聲明的字符編碼與網(wǎng)頁(yè)內(nèi)容編碼不一致，可能會(huì)導(dǎo)致亂碼。
頁(yè)面自動(dòng)刷新或跳轉(zhuǎn)
<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="3; url=https://www.baidu.com">
使用此標(biāo)簽刷新當(dāng)前頁(yè)面需特別注意死循環(huán)導(dǎo)致頁(yè)面不停刷新。
SEO 優(yōu)化
<title>頁(yè)面標(biāo)題</title>
<meta name="description" content="頁(yè)面描述">
<meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3">
這三兄弟通常稱(chēng)為網(wǎng)頁(yè)的 TDK，搜索引擎爬蟲(chóng)會(huì)根據(jù) TDK 來(lái)判斷網(wǎng)頁(yè)內(nèi)容，然后進(jìn)行收錄，在需要 SEO 優(yōu)化的網(wǎng)頁(yè)，一定要把 TDK 設(shè)置好。
當(dāng)然也可以設(shè)置禁止搜索引擎收錄：
<meta name="robots" content="noindex, nofollow">
Open Graph 協(xié)議設(shè)置
用于設(shè)置在社交平臺(tái)分享時(shí)的標(biāo)題、描述和縮略圖等信息。
<meta property="og:title" content="文章標(biāo)題">
<meta property="og:description" content="文章簡(jiǎn)介">
<meta property="og:image" content="https://example.com/xxxx.jpg">
<meta property="og:url" content="https://example.com/page-url">
還有針對(duì) Twitter 分享卡片的設(shè)置，國(guó)內(nèi)用的較少，畢竟有墻~~
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitter用戶(hù)名">
<meta name="twitter:title" content="推文標(biāo)題">
<meta name="twitter:description" content="推文描述">
<meta name="twitter:image" content="https://example.com/xxx.jpg">
針對(duì) IE
強(qiáng)制 IE 使用最新渲染引擎
<meta http-equiv="X-UA-Compatible" content="IE=edge">
內(nèi)容安全策略
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
此部分內(nèi)容配置很強(qiáng)大的，不止這一種寫(xiě)法，有興趣可以參考 MDN 相關(guān)文檔，可配置復(fù)雜的 CSP（內(nèi)容安全策略），防止 XSS 攻擊。
Android Chrome 主題色
設(shè)置瀏覽器地址欄或 PWA 應(yīng)用的主題顏色。
<meta name="theme-color" content="#000000">
iOS Safari 獨(dú)有配置
<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">
禁止電話號(hào)碼自動(dòng)識(shí)別
有時(shí)候一串?dāng)?shù)字并不是一個(gè)電話號(hào)碼，在移動(dòng)端也會(huì)被錯(cuò)誤的識(shí)別為號(hào)碼，導(dǎo)致影響用戶(hù)體驗(yàn)，可以使用 meta 標(biāo)簽禁止電話號(hào)碼識(shí)別。
<meta name="format-detection" content="telephone=no">
禁止郵箱自動(dòng)識(shí)別
<meta name="format-detection" content="email=no">
優(yōu)先使用 HTTPS
將頁(yè)面內(nèi)的 HTTP 請(qǐng)求自動(dòng)升級(jí)為 HTTPS。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
?轉(zhuǎn)自https://www.cnblogs.com/linx/p/18873743
該文章在 2025/5/13 9:30:26 編輯過(guò)
400 186 1886
