超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

經(jīng)常查看網(wǎng)頁源碼的同學(xué)應(yīng)該都有注意到，基本上面向移動(dòng)端的所有網(wǎng)站都有個(gè) <meta name="viewport" xxx> 這樣的HTML元素。

為什么需要 meta 標(biāo)簽？

在移動(dòng)端剛起步的時(shí)候，默認(rèn)網(wǎng)頁是以 PC 端的寬度渲染，這就導(dǎo)致用戶看到的網(wǎng)頁過小，需要用戶手動(dòng)縮放才能看到網(wǎng)頁內(nèi)容。

在移動(dòng)端發(fā)展過程中，標(biāo)準(zhǔn)逐漸完善，就演變出了 meta 標(biāo)簽的視口設(shè)置，用于控制移動(dòng)端頁面的顯示大小，以及是否允許縮放等。

meta 標(biāo)簽的視口設(shè)置

一個(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è)置初始縮放比例，頁面加載時(shí)顯示的縮放比例，不放大也不縮小。
• maximum-scale=5.0：設(shè)置最大縮放比例，用戶可以縮放到的最大倍數(shù)。
• minimum-scale=0.5：設(shè)置最小縮放比例，用戶可以縮放到的最小倍數(shù)。
• user-scalable=yes：設(shè)置是否允許用戶縮放，yes 表示允許縮放。

禁止用戶縮放：

部分需求場(chǎng)景，比如一些游戲類網(wǎng)站，需要禁止用戶縮放，可以這樣設(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īng)式設(shè)計(jì)）

自由縮放查看內(nèi)容：

如果網(wǎng)頁沒有特殊要求，建議設(shè)置為允許用戶自由縮放查看內(nèi)容：

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

meta 標(biāo)簽其他用法

meta 標(biāo)簽的功能可強(qiáng)大了，好多好多的網(wǎng)頁元信息都可以通過它設(shè)置。

字符編碼聲明

<meta charset="utf-8">

此標(biāo)簽用于聲明網(wǎng)頁的字符編碼，一般使用 utf-8 編碼。如果聲明的字符編碼與網(wǎng)頁內(nèi)容編碼不一致，可能會(huì)導(dǎo)致亂碼。

頁面自動(dòng)刷新或跳轉(zhuǎn)

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

使用此標(biāo)簽刷新當(dāng)前頁面需特別注意死循環(huán)導(dǎo)致頁面不停刷新。

SEO 優(yōu)化

<title>頁面標(biāo)題</title>
<meta name="description" content="頁面描述">
<meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3">

這三兄弟通常稱為網(wǎng)頁的 TDK，搜索引擎爬蟲會(huì)根據(jù) TDK 來判斷網(wǎng)頁內(nèi)容，然后進(jìn)行收錄，在需要 SEO 優(yōu)化的網(wǎng)頁，一定要把 TDK 設(shè)置好。

當(dāng)然也可以設(shè)置禁止搜索引擎收錄：

<!-- noindex: 禁止索引本頁
nofollow: 禁止跟蹤本頁鏈接
noarchive: 禁止顯示快照 -->
<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è)置，國內(nèi)用的較少，畢竟有墻~~

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitter用戶名">
<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)容安全策略

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

此部分內(nèi)容配置很強(qiáng)大的，不止這一種寫法，有興趣可以參考 MDN 相關(guān)文檔，可配置復(fù)雜的 CSP（內(nèi)容安全策略），防止 XSS 攻擊。

Android Chrome 主題色

設(shè)置瀏覽器地址欄或 PWA 應(yīng)用的主題顏色。

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

iOS Safari 獨(dú)有配置

<!-- 啟用 Web App 模式（全屏、隱藏瀏覽器UI） -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 定義狀態(tài)欄樣式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 指定啟動(dòng)圖標(biāo) -->
<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)致影響用戶體驗(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

將頁面內(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