移動端meta標(biāo)簽設(shè)置
1.設(shè)置當(dāng)前html文件的字符編碼
<meta charset="UTF-8">
1
2設(shè)置瀏覽器的兼容模式（讓IE使用最新的瀏覽器渲染）
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
1
3.視口（快捷鍵：meta:vp）
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
1
作用：在移動瀏覽器中挎春，當(dāng)頁面寬度超出設(shè)備棍厂，瀏覽器內(nèi)部虛擬的一個頁面容器，將頁面容器縮放到設(shè)備那么大展示笋籽；
視口的寬度可以通過meta標(biāo)簽設(shè)置誊酌；
此屬性為移動端頁面視口設(shè)置部凑；
width：視口的寬度，width=device-width：寬度是設(shè)備的寬度
initial-scale：初始化縮放碧浊，- initial-scale=1.0：不縮放
user-scalable：是否允許用戶自行縮放涂邀，取值0或1，yes或no
minimum-scale：最小縮放
maximum-scale：最大縮放
一般設(shè)置了不允許縮放箱锐，就沒必要設(shè)置最大最小縮放了比勉。
4.Cache-Control頭域
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
1
Cache-Control指定請求和響應(yīng)遵循的緩存機(jī)制。在請求消息或響應(yīng)消息中設(shè)置Cache-Control并不會修改另一個消息處理過程中的緩存處理過程驹止。請求時的緩存指令包括no-cache浩聋、no-store、max-age臊恋、max-stale衣洁、min-fresh、only-if-cached抖仅，響應(yīng)消息中的指令包括public坊夫、private砖第、no-cache、no-store环凿、no-transform梧兼、must-revalidate、proxy-revalidate智听、max-age羽杰。各個消息中的指令含義如下,
no-cache指示請求或響應(yīng)消息不能緩存
no-store用于防止重要的信息被無意的發(fā)布。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存
must-revalidate：告訴瀏覽器到推、緩存服務(wù)器考赛，本地副本過期前，可以使用本地副本环肘；本地副本一旦過期，必須去源服務(wù)器進(jìn)行有效性校驗集灌。
5.是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容悔雹，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出
<meta http-equiv="Pragma" content="no-cache"/>
1
6.禁止將頁面中的一連串?dāng)?shù)字識別為電話號碼、并設(shè)置為手機(jī)可以撥打的一個連接欣喧。
這個標(biāo)簽的默認(rèn)值是telephone=yes腌零。
<meta content="telephone=no" name="format-detection"/>
1
7.刪除默認(rèn)的蘋果工具欄和菜單欄
? <meta content="yes" name="apple-mobile-web-app-capable"/>
1
當(dāng)我們需要顯示工具欄和菜單欄時，這個行meta就不用加了唆阿，默認(rèn)就是顯示益涧。
8.控制狀態(tài)欄顯示樣式
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
1
content設(shè)置狀態(tài)欄顏色
9.條件注釋
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
- html5shiv讓瀏覽器可以識別html5的新標(biāo)簽；
- respond讓低版本瀏覽器可以使用CSS3的媒體查詢驯鳖。
控制顯示區(qū)域各種屬性：
<metacontent="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"name="viewport">
? ? ? width ? ? ? ? ? ? ? ? ? ? ?- viewport的寬度
height ? ? ? ? ? ? ? ? ? ? – viewport的高度
initial-scale ? ? ? ? ?- 初始的縮放比例
minimum-scale ?- 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable ? ? ? – 用戶是否可以手動縮放
IOS中Safari允許全屏瀏覽：
<metacontent="yes"name="apple-mobile-web-app-capable">
IOS中Safari頂端狀態(tài)條樣式：
<metacontent="black"name="apple-mobile-web-app-status-bar-style">
忽略將數(shù)字變?yōu)殡娫捥柎a：
<metacontent="telephone=no"name="format-detection">
一般情況下闲询，IOS和Android系統(tǒng)都會默認(rèn)某長度內(nèi)的數(shù)字為電話號碼，即使不加也是會默認(rèn)顯示為電話的浅辙，so扭弧，取消這個很有必要！
IOS中Safari設(shè)置保存到桌面圖標(biāo)：
這是IOS中Safari特有的meta记舆，是在你保存某個頁面到桌面的時候使用這張圖作為桌面圖標(biāo)鸽捻，so，尺寸和iphone上的一致泽腮，是57*57px
<linkrel="apple-touch-icon"href="custom_icon.png">
// 手勢事件
touchstart??????????? //當(dāng)手指接觸屏幕時觸發(fā)
touchmove?????????? //當(dāng)已經(jīng)接觸屏幕的手指開始移動后觸發(fā)
touchend???????????? //當(dāng)手指離開屏幕時觸發(fā)
touchcancel
// 觸摸事件
gesturestart????????? //當(dāng)兩個手指接觸屏幕時觸發(fā)
gesturechange????? //當(dāng)兩個手指接觸屏幕后開始移動時觸發(fā)
gestureend
// 屏幕旋轉(zhuǎn)事件??
onorientationchange????
// 檢測觸摸屏幕的手指何時改變方向??????
orientationchange??????
// touch事件支持的相關(guān)屬性
touches????????
targetTouches??????
changedTouches?????????????
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)??????
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)??????
screenX // Relative to the screen???????
screenY ? // Relative to the screen??????
pageX // Relative to the full page (includes scrolling)????
pageY // Relative to the full page (includes scrolling)????
target // Node the touch event originated from?????
identifier ?? // An identifying number, unique to each touch event
4.?屏幕旋轉(zhuǎn)事件：onorientationchange
添加屏幕旋轉(zhuǎn)事件偵聽御蒲，可隨時發(fā)現(xiàn)屏幕旋轉(zhuǎn)狀態(tài)（左旋、右旋還是沒旋）诊赊。例子：
// 判斷屏幕是否旋轉(zhuǎn)
functionorientationChange() {
????switch(window.orientation) {
???? case0:?
????????????alert("肖像模式 0,screen-width: "+ screen.width + "; screen-height:"+ screen.height);
????????????break;
???? case-90:?
????????????alert("左旋 -90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);
????????????break;
???? case90:???
????????????alert("右旋 90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);
????????????break;
???? case180:???
???????? alert("風(fēng)景模式 180,screen-width: "+ screen.width + "; screen-height:"+ screen.height);
???????? break;
????};<br>};
// 添加事件監(jiān)聽
addEventListener('load', function(){
????orientationChange();
????window.onorientationchange = orientationChange;
});
5.?隱藏地址欄 & 處理事件的時候厚满，防止?jié)L動條出現(xiàn)：
// 隱藏地址欄? & 處理事件的時候 ，防止?jié)L動條出現(xiàn)
addEventListener('load', function(){
????????setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
6.?雙手指滑動事件：
// 雙手指滑動事件
addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;},
?????false// 兼容各瀏覽器碧磅，表示在冒泡階段調(diào)用事件處理程序 (true 捕獲階段)
);
functiontwoFingerScroll(ev) {
????vardelta =ev.wheelDelta/120;????????????? //對 delta 值進(jìn)行判斷(比如正負(fù)) 痰滋，而后執(zhí)行相應(yīng)操作
????returntrue;
};
7. 判斷是否為iPhone：
// 判斷是否為 iPhone ：
functionisAppleMobile() {
????return(navigator.platform.indexOf('iPad') != -1);
};
8.?localStorage:
?例子 ：（注意數(shù)據(jù)名稱 ?n ?要用引號引起來）
varv = localStorage.getItem('n') ? localStorage.getItem('n') : "";?? // 如果名稱是? n 的數(shù)據(jù)存在 摘能，則將其讀出 ，賦予變量? v? 敲街。
localStorage.setItem('n', v);?????????????????????????????????????????? // 寫入名稱為 n团搞、值為? v? 的數(shù)據(jù)
localStorage.removeItem('n');?????????????????????????????????????????? // 刪除名稱為? n? 的數(shù)據(jù)???
9. 使用特殊鏈接：
?如果你關(guān)閉自動識別后 ，又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 多艇，那么可以通過這樣來聲明電話鏈接 ,
<ahref="tel:12345654321">打電話給我</a>
<ahref="sms:12345654321">發(fā)短信</a>
或用于單元格：
<tdonclick="location.href='tel:122'">
10.?自動大寫與自動修正
要關(guān)閉這兩項功能逻恐，可以通過autocapitalize 與autocorrect 這兩個選項：
<inputtype="text"autocapitalize="off"autocorrect="off"/>
聲明viewport視口
viewport對于移動端設(shè)備來說非常的重要，用于定義視口的各種行為峻黍。其中最為重要的就是要設(shè)定一個展示頁面的寬度width=device-width复隆，如果我們不設(shè)置的話，width默認(rèn)的值是980PX姆涩，假設(shè)我們當(dāng)前用的是IPHONE 5來訪問H5頁面挽拂，IPHONE 5本身的寬度只有320PX，但是設(shè)備定義了H5頁面展示的區(qū)域?qū)挾葢?yīng)該是980PX骨饿，這樣的話要想把H5頁面全部進(jìn)行展示亏栈，只有整體縮小大約三倍或者讓用戶在320PX的區(qū)域中來回的挪動才能看全整個H5頁面。這種方式用戶的體驗度會非常的差宏赘，所以我們設(shè)定width=device-width绒北，意思是當(dāng)前設(shè)備屏幕有多寬，那么就按照多寬來渲染頁面察署，這樣就不會出現(xiàn)需要靠縮小或者左右移動來看完整個頁面了闷游。
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? 定義是否允許用戶手動縮放頁面扳埂，默認(rèn)值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)閉電話自動識別：開啟撥打電話/發(fā)送短信功能立即撥打電話立即發(fā)送短信如果同樣也需要禁止自動識別郵箱，可以在原來的基礎(chǔ)上增加“email=no”拍屑。開啟自動識別郵箱給我們發(fā)郵件
把頁面增加到桌面主屏幕
在蘋果手機(jī)的Safari瀏覽器中訪問一個頁面途戒，用戶可以通過“添加到桌面”這一操作把網(wǎng)頁保存到自己的主屏幕桌面上（就像安裝一個APP，在主屏幕上就會有一個操作的圖標(biāo)）僵驰，這樣下一次可以直接點擊圖標(biāo)打開頁面喷斋。(只對IOS有效)
當(dāng)我們將一個網(wǎng)頁添加到主屏幕時，會更希望它能有像App一樣的表現(xiàn)蒜茴，沒有地址欄和狀態(tài)欄全屏顯示星爪。
WebApp全屏模式
設(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)頁之上)。
添加到主屏后的圖標(biāo)
IOS系統(tǒng)中對ICON有一套規(guī)范猪瞬，就是在IOS設(shè)備的圖標(biāo)統(tǒng)一為“四邊圓角”憎瘸、“高光處理”入篮。至于“圖標(biāo)陰影”陈瘦，是IOS設(shè)備中統(tǒng)一為所有桌面元素增加的，所以不作為圖標(biāo)單獨處理的樣式潮售。rel="apple-touch-icon-precomposed"是設(shè)定按照設(shè)計稿原圖的圖標(biāo)顯示痊项，rel="apple-touch-icon"是設(shè)定在原圖的基礎(chǔ)上增加一些高光光亮效果。一般來說我們的ICON的尺寸是114x114酥诽。
添加到主屏后的標(biāo)題
QQ瀏覽器(X5內(nèi)核)獨有的META
//->設(shè)置屏幕方向? ? //->設(shè)置全屏
UC瀏覽器獨有的META
//->設(shè)置屏幕方向? ? //->設(shè)置全屏? ? //->縮放不出現(xiàn)滾動條? ? //->夜間模式
強(qiáng)制圖片顯示：UC瀏覽器為了節(jié)省流量鞍泉，為用戶提供了無圖模式，但是如果頁面的圖片是必不可少的肮帐，如驗證碼的咖驮，需要強(qiáng)制瀏覽器顯示圖片，可以設(shè)置imagemode训枢。通過META設(shè)置圖片加載方式會作用于整個頁面托修，如果希望對單個圖片進(jìn)行設(shè)置，那么可以使用這個<img src="" show="force"/>
使用了application這種應(yīng)用模式后恒界，頁面講默認(rèn)全屏睦刃，禁止長按菜單，禁止收拾十酣，標(biāo)準(zhǔn)排版涩拙，以及強(qiáng)制圖片顯示际长。
歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處兴泥。
