行動端專用的meta標籤設定大全

在之前學習前端中，對meta標籤的了解就只是這句話。

 <meta charset=UTF-8>

但是打開任意的網站，其head標籤內都有一列的meta標籤。例如我們VeVb武林網網站，但是自己卻很不熟悉，於是把meta標籤加入了學習計畫的最前方。

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

這個用的最多，width和height指令分別指定視區的邏輯寬度和高度。他們的值要么是以像素為單位的數字，要么是一個特殊的標記符號。 width指令使用device-width標記可以指示視區寬度應為裝置的螢幕寬度。類似地height指令使用device-height標記指示視區高度為裝置的螢幕高度。

user-scalable指令指定使用者是否可以縮放視區，也就是縮放Web頁面的視圖。值為yes時允許使用者進行縮放，值為no時不允許縮放

initial-scale指令用來設定Web頁面的初始縮放比例。預設的初始縮放比例值因智慧型手機瀏覽器的不同而有所差異。通常情況下設備會在瀏覽器中呈現整個Web頁面，設為1.0則會顯示未經縮放的Web文件。

maximum-scale和minimum-scale指令用來設定使用者對Web頁面縮放比例的限制。值的範圍為0.25至10.0之間。與initial-scale相同，這些指令的值是應用於視區內容的縮放比例。

所有智慧型手機瀏覽器都支援ViewPort <meta>標記的width和user-scalabel指令。但Opera Mobile不使用user-scalable指令，而是主張使用者應始終保留在行動瀏覽器中縮放Web頁面的能力。

window.devicePixelRatio是裝置上實體像素和裝置獨立像素(device-independent pixels (dips))的比例。公式表示為：window.devicePixelRatio = 物理像素/ dips

如果content的值小於或等於screen width 網站自適應畫面fit-to-screen將被關閉網站不會隨著瀏覽器拉伸而縮放

如果content的值大於screen width;fit-to-screen將開啟

2015-07-08

 <meta name=viewport content=minimal-ui>

在iOS 7.1的Safari中為meta標籤新增minimal-ui屬性，讓網頁在載入時可隱藏頂部的網址列與底部的導覽列。

 <meta name=apple-mobile-web-app-capable content=yes>

是否啟動webapp功能設定為yes 網站就會在滿屏模式full-screen mode刪除預設的蘋果工具列和功能表列

 <meta name=apple-touch-fullscreen content=yes>

開啟對web app程式的支持

 <meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />

iPhone會自動把你這個文字加上連結樣式、並且點擊這個數字還會自動撥號！

telephone=no就忽略頁面中的數字識別為電話號碼

telephone=yes開啟了把數字轉化為撥號連結,在預設是情況下就是開啟！

 <meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style content=black-translucent />

控制狀態列顯示樣式default（白色）black（黑色） black-translucent（灰色半透明）

如果apple-mobile-web-app-capable 設定為yes 了，那麼在iPhone,iPad,iTouch的safari上可以使用新增至主畫面按鈕將網站新增至主畫面。

而透過設定對應apple-touch-icon 標籤，則新增到主畫面上的圖示就會使用我們指定的圖片。

以下是針對ox不同設備，選擇一個最優icon。預設iphone的大小為60px，ipad為76px，retina螢幕乘以2倍。

 <link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon sizes=76×76″ href=touch-icon-ipad.png><link rel=apple- touch-icon sizes=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon sizes=152×152″ href=touch-icon-ipad-retina.png>

ios7以前系統預設會為圖示添加特效（圓角及高光），如果不希望系統添加特效，則可以用apple-touch-icon-precomposed.png 取代apple-touch-icon.png

如果沒有跟相應設備推薦尺寸一致的圖標，那個會優先使用比建議尺寸大，但最接近建議尺寸的圖標。

如果沒有比建議尺寸大的圖標，會優先選擇最接近建議尺寸的圖標。

如些有多個圖示符合建議尺寸，會優先選擇包含關鍵字precomposed的圖示。

如果未在區域指定以link標籤指定圖標，會自動搜尋網站根目錄下以apple-touch-icon 為前綴的png圖標。

<meta http-equiv=X-UA-Compatible content=IE=edge>避免IE使用相容模式

<meta name=MobileOptimized content=320″>微軟為IE Mobile版設定的定義寬度標記

瀏覽器不會自動調整文件的大小,也就是說是固定大小,不會隨著瀏覽器拉伸縮放。

<meta name=HandheldFriendly content=true /> ：是否對手持裝置友好，只有true或false

<meta name=screen-orientation content=portrait>強制垂直螢幕

<meta name=full-screen content=yes>強制全螢幕

<meta name=browsermode content=application>應用模式

<meta name=x5-orientation content=portrait>強制垂直屏

<meta name=x5-fullscreen content=true>強制全螢幕

<meta name=x5-page-mode content=app>應用模式

<meta name=renderer content=webkit>開啟急速模式

meta指元素可提供有關頁面的元資訊（meta-information），例如針對搜尋引擎和更新頻度的描述和關鍵字。 標籤位於文件的頭部，不包含任何內容。 標籤的屬性定義了與文件相關聯的名稱/值對。

 <meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta content=black name=apple-mobile-web-app-status-bar-style> <meta content=telephone=no name=format-detection>

第一個meta標籤表示：強制讓文件的寬度與裝置的寬度保持1:1，且文件最大的寬度比例是1.0，且不允許使用者點選螢幕放​​大瀏覽；

• width - viewport的寬度height - viewport的高度
• initial-scale - 初始的縮放比例
• minimum-scale - 允許使用者縮放到的最小比例
• maximum-scale - 允許使用者縮放到的最大比例
• user-scalable - 使用者是否可以手動縮放

第二個meta標籤是iphone裝置中的safari私有meta標籤，它表示：允許全螢幕模式瀏覽；

第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

在web app應用下狀態條（螢幕頂部條）的顏色；

預設值為default（白色），可以設定為black（黑色）和black-translucent（灰色半透明）。

第四個meta標籤表示：告訴設備忽略將頁面中的數字識別為電話號碼。

 <meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, address=no>

 <meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport content=initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable==>

 <title> 京東- 手機版</title><meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content -Type content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Expires content=-1> <meta http-equiv=Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Keywords content=><meta name=description content=>

 <title>手機網路易網</title><meta name=viewport content=width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no><meta content =telephone=no name=format-detection /><meta name=keywords content= /><meta name=description content= />

 <meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta name=format-detection content=telephone=no>

 <title>手機搜狐網</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache /><meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />

----

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

viewport ->視窗(展示區域)

width=device-width裝置寬度

 <metaname = 'viewport 'content = width=320><metaname = 'viewport 'content = width=device-width>

user-scalable=no/0是否允許縮放

initial-scale=1.0初始值

maximum-scale=1.0

minimum-scale=1.0

------------—–

 <meta name=viewport content=width=device-width, user-scalable=no>

user-scalable=no/0禁止使用者縮放頁面

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

initial-scale=1.0初始化頁面縮放比例

 <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

maximum-scale=1.0最大縮放比例(為了個別手機華為Meta8)

------------—–

 <!—允許網頁以app形式運行(允許添加到主畫面)—><meta name=apple-mobile-web-app-capable content=yes><!—狀態列顏色—><meta name=apple-mobile -web-app-status-bar-style content=black>

 <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—禁止之別電話號碼和信箱—><meta name=format-detection content=telephone=no,email=no>

 <meta content=yes name=apple-mobile-web-app-capable><!–點選頁面區域全螢幕展示—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone=no,email =no name=format-detection/><!–應用訊息，保留系統歷史記錄，運動效果–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>

 <!–強制讓360瀏覽器用chrome核心渲染頁面–><meta name=renderer content=webkit><!–盡量用IE最新的模式渲染–><meta http-equiv=X-UA-Compatible content=IE= edge><!–針對手持裝置最佳化，主要是針對一些舊的不辨識viewport的瀏覽器，例如黑莓–><meta name=HandheldFriendly content=true><!–微軟的老式瀏覽器–><meta name=MobileOptimized content=320″><!– uc強制垂直螢幕–><meta name=screen-orientation content=portrait><!– QQ強制垂直螢幕–><meta name=x5-orientation content=portrait><!– UC強制全螢幕–><meta name=full-screen content=yes><!– QQ強制全螢幕–><meta name=x5-fullscreen content=true><!– UC應用模式–><meta name=browsermode content=application><!– QQ應用模式–><meta name=x5-page-mode content=app>

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或工作有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。