前言
之前學習前端中，對meta標簽的了解僅僅只是這一句。
<meta charset="UTF-8">
但是打開任意的網站，其head標簽內都有一列的meta標簽。比如我們武林網網站，但是自己卻很不熟悉，于是把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頁面的能力。
下面還真用得少
devicePixelRatio
window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips
fit-to-screen網站自適應屏幕
如果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（灰色半透明）
link標簽apple-touch-icon
如果 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圖標。
注：ios7不再為icon添加特效，ios7以前則默認為icon添加特效，除非icon有關鍵字 -precomposed.png 為后綴。
IE瀏覽器
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式
<meta name=”MobileOptimized” content=”320″> 微軟為IE Mobile版設置的定義寬度標記
瀏覽器不會自動調整文件的大小,也就是說是固定大小,不會隨著瀏覽器拉伸縮放。
<meta name=”HandheldFriendly” content=”true” /> ：是否對手持設備友好，只有true或者false
UC瀏覽器
<meta name=”screen-orientation” content=”portrait”> 強制豎屏
<meta name=”full-screen” content=”yes”> 強制全屏
<meta name=”browsermode” content=”application”> 應用模式
QQ瀏覽器
<meta name=”x5-orientation” content=”portrait”> 強制豎屏
<meta name=”x5-fullscreen” content=”true”> 強制全屏
<meta name=”x5-page-mode” content=”app”> 應用模式
360瀏覽器
<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，且不允許用戶點擊屏幕放大瀏覽；
第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
在web app應用下狀態條（屏幕頂部條）的顏色；
默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼。
下面看一下各大廠移動端頁面 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=no">
三、京東
<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)
—————————————————————————–
蘋果設備專有meta:
<!—允許網頁以app形式運行(允許添加到主屏幕)—><meta name=”apple-mobile-web-app-capable” content=”yes”><!—狀態欄顏色—><meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
京東meta:
<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：
<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:
<!–強制讓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”>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
