聲明viewport視口
viewport對于移動端設(shè)備來說非常的重要，用于定義視口的各種行為歪架。其中最為重要的就是要設(shè)定一個展示頁面的寬度width=device-width，如果我們不設(shè)置的話，width默認的值是980PX伶唯，假設(shè)我們當前用的是IPHONE 5來訪問H5頁面憨攒，IPHONE 5本身的寬度只有320PX世杀，但是設(shè)備定義了H5頁面展示的區(qū)域?qū)挾葢?yīng)該是980PX，這樣的話要想把H5頁面全部進行展示肝集，只有整體縮小大約三倍或者讓用戶在320PX的區(qū)域中來回的挪動才能看全整個H5頁面瞻坝。這種方式用戶的體驗度會非常的差，所以我們設(shè)定width=device-width杏瞻，意思是當前設(shè)備屏幕有多寬所刀，那么就按照多寬來渲染頁面，這樣就不會出現(xiàn)需要靠縮小或者左右移動來看完整個頁面了捞挥。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
width 正整數(shù)或device-width 定義視口的寬度浮创，單位為像素
height 正整數(shù)或device-height 定義視口的高度，單位為像素
initial-scale [0.0-10.0] 定義初始縮放值
minimum-scale [0.0-10.0] 定義縮小最小比例砌函，它必須小于或等于maximum-scale設(shè)置
maximum-scale [0.0-10.0] 定義放大最大比例斩披，它必須大于或等于minimum-scale設(shè)置
user-scalable yes/no 定義是否允許用戶手動縮放頁面，默認值yes
忽略數(shù)字自動識別為電話號碼
在IOS Safari（其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接讹俊。比如：7位數(shù)字垦沉，形如：1234567；帶括號及加號的數(shù)字仍劈，形如：(+86)123456789厕倍；雙連接線的數(shù)字，形如：00-00-00111贩疙；11位數(shù)字讹弯，形如：13800138000可能還有其他類型的數(shù)字也會被識別况既，但在具體的業(yè)務(wù)場景中，有些時候這是不必須的组民，所以你可以關(guān)閉電話自動識別棒仍，然后在需要撥號的地方，開啟電話呼出和短信功能邪乍。
關(guān)閉電話自動識別：
<meta name="format-detection" content="telephone=no"/>
開啟撥打電話/發(fā)送短信功能
<a href="tel:123456">立即撥打電話</a> <a href="sms:123456">立即發(fā)送短信</a>
如果同樣也需要禁止自動識別郵箱降狠，可以在原來的基礎(chǔ)上增加“email=no”。
<meta name="format-detection" content="telephone=no,email=no"/>
開啟自動識別郵箱
<a href="mailto:zhufengpeixun@163.com">給我們發(fā)郵件</a>
把頁面增加到桌面主屏幕
在蘋果手機的Safari瀏覽器中訪問一個頁面庇楞，用戶可以通過“添加到桌面”這一操作把網(wǎng)頁保存到自己的主屏幕桌面上（就像安裝一個APP榜配，在主屏幕上就會有一個操作的圖標），這樣下一次可以直接點擊圖標打開頁面吕晌。(只對IOS有效)
當我們將一個網(wǎng)頁添加到主屏幕時蛋褥，會更希望它能有像App一樣的表現(xiàn)，沒有地址欄和狀態(tài)欄全屏顯示睛驳。
WebApp全屏模式
<meta name="apple-mobile-web-app-capable" content="yes"/>
設(shè)置狀態(tài)欄顏色
只有在開啟WebApp全屏模式下才能起到效果烙心。content的值為 default(狀態(tài)欄將為正常的，即白色乏沸，網(wǎng)頁從狀態(tài)欄以下開始顯示) | black(狀態(tài)欄將為黑色淫茵，網(wǎng)頁從狀態(tài)欄以下開始顯示) | black-translucent(狀態(tài)欄將為灰色半透明，網(wǎng)頁將充滿整個屏幕蹬跃，狀態(tài)欄會蓋在網(wǎng)頁之上)匙瘪。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
添加到主屏后的圖標
IOS系統(tǒng)中對ICON有一套規(guī)范，就是在IOS設(shè)備的圖標統(tǒng)一為“四邊圓角”蝶缀、“高光處理”丹喻。至于“圖標陰影”，是IOS設(shè)備中統(tǒng)一為所有桌面元素增加的翁都，所以不作為圖標單獨處理的樣式碍论。rel="apple-touch-icon-precomposed"是設(shè)定按照設(shè)計稿原圖的圖標顯示，rel="apple-touch-icon"是設(shè)定在原圖的基礎(chǔ)上增加一些高光光亮效果柄慰。一般來說我們的ICON的尺寸是114x114鳍悠。
<link href="圖片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
添加到主屏后的標題
<meta name="apple-mobile-web-app-title" content="標題"/>
QQ瀏覽器(X5內(nèi)核)獨有的META
<meta name="x5-orientation" content="portrait|landscape"/> //->設(shè)置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->設(shè)置全屏
UC瀏覽器獨有的META
<meta name="screen-orientation" content="portrait|landscape"/> //->設(shè)置屏幕方向 <meta name="full-screen" content="true"/> //->設(shè)置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->縮放不出現(xiàn)滾動條 <meta name="nightmode" content="enable|disable"/> //->夜間模式
強制圖片顯示：UC瀏覽器為了節(jié)省流量，為用戶提供了無圖模式坐搔，但是如果頁面的圖片是必不可少的贼涩，如驗證碼的，需要強制瀏覽器顯示圖片薯蝎，可以設(shè)置imagemode。通過META設(shè)置圖片加載方式會作用于整個頁面谤绳，如果希望對單個圖片進行設(shè)置占锯，那么可以使用這個<img src="" show="force"/>
<meta name="imagemode" content="force"/>
使用了application這種應(yīng)用模式后袒哥，頁面講默認全屏，禁止長按菜單消略，禁止收拾堡称，標準排版，以及強制圖片顯示艺演。
<meta name="browsermode" content="application"/>
