本系列文章大都來自于網(wǎng)上大神的解決方案垂蜗，在這里羅列出來碉就，只為開發(fā)時方便查詢县袱，創(chuàng)作權(quán)歸原作者所有。
簡單做下總結(jié)享扔，首先了解下移動web帶來的問題
- 設(shè)備更新?lián)Q代快——低端機遺留下問題底桂、高端機帶來新挑戰(zhàn)
- 瀏覽器廠商不統(tǒng)一——兼容問題多
- 網(wǎng)絡(luò)更復(fù)雜——弱網(wǎng)絡(luò)，頁面打開慢
- 低端機性能差——頁面操作卡頓
- HTML5新技術(shù)多——學(xué)習(xí)成本不低
- 未知問題——坑多
面對這些問題惧眠，一開始我們只能在未知中試錯籽懦，知道錯誤的方案才能更容易尋找正確的解決問題思路，2年多來氛魁，可看到移動web在業(yè)界不斷趨向于成熟暮顺，各種框架和解決方案不斷的涌現(xiàn)讓移動端開發(fā)不再是個噩夢厅篓。
H5頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略將頁面中的數(shù)字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
去掉winphone系統(tǒng)a拖云、input標(biāo)簽被點擊時產(chǎn)生的半透明灰色背景
<meta name="msapplication-tap-highlight" content="no">
當(dāng)網(wǎng)站添加到主屏幕快速啟動方式贷笛，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后宙项，safari上已看不到效果 -->
將網(wǎng)站添加到主屏幕快速啟動方式乏苦，僅針對ios的safari頂端狀態(tài)條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black尤筐、black-translucent -->
viewport模板——通用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" 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 content="email=no" name="format-detection"><meta name="msapplication-tap-highlight" content="no">
<title>標(biāo)題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>這里開始內(nèi)容</body>
</html>
viewport模板 - target-densitydpi=device-dpi汇荐，android 2.3.5以下版本不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
<!-- width取值與頁面定義的寬度一致 -->
<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 content="email=no" name="format-detection"><meta name="msapplication-tap-highlight" content="no">
<title>標(biāo)題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>這里開始內(nèi)容</body>
</html>
