以下文章來源于IQ前端 ，作者JowayYoung
#####HTML方向
調用系統(tǒng)功能
使用<a>能快速調用移動設備的電話/短信/郵件三大通訊功能沙热，使用<input>能快速調用移動設備的的圖庫/文件初烘。
這些功能方便了頁面與系統(tǒng)的交互，關鍵在于調用格式一定要準確变擒，否則會被移動端瀏覽器忽略
```
<!-- 撥打電話 -->
<a href="tel:10086">撥打電話給10086小姐姐</a>
<!-- 發(fā)送短信 -->
<a href="sms:10086">發(fā)送短信給10086小姐姐</a>
<!-- 發(fā)送郵件 -->
<a href="mailto:young.joway@aliyun.com">發(fā)送郵件給JowayYoung</a>
<!-- 選擇照片或拍攝照片 -->
<input type="file" accept="image/*">
<!-- 選擇視頻或拍攝視頻 -->
<input type="file" accept="video/*">
<!-- 多選文件 -->
<input type="file" multiple>
```
忽略自動識別
有些移動端瀏覽器會自動將數(shù)字字母符號識別為電話/郵箱并將其渲染成上述「調用系統(tǒng)功能」里的<a>君珠。雖然很方便卻有可能違背需求。
```
<!-- 忽略自動識別電話 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略自動識別郵箱 -->
<meta name="format-detection" content="email=no">
<!-- 忽略自動識別電話和郵箱 -->
<meta name="format-detection" content="telephone=no, email=no">
```
彈出數(shù)字鍵盤
使用<input type="tel">彈起數(shù)字鍵盤會帶上#和*娇斑，適合輸入電話策添。推薦使用<input type="number" pattern="\d*">彈起數(shù)字鍵盤，適合輸入驗證碼等純數(shù)字格式毫缆。
```
<!-- 純數(shù)字帶#和* -->
<input type="tel">
<!-- 純數(shù)字 -->
<input type="number" pattern="\d*">
```
喚醒原生應用
通過location.href與原生應用建立通訊渠道唯竹，這種頁面與客戶端的通訊方式稱為「URL Scheme」，其基本格式為scheme://[path][?query]苦丁，筆者曾經發(fā)表過《H5與App的通訊方式》講述URL Scheme的使用浸颓。
-「scheme」：應用標識，表示應用在系統(tǒng)里的唯一標識
-「path」：應用行為，表示應用某個頁面或功能
-「query」：應用參數(shù)猾愿，表示應用頁面或應用功能所需的條件參數(shù)
URL Scheme一般由前端與客戶端共同協(xié)商鹦聪。喚醒原生應用的前提是必須在移動設備里安裝了該應用，有些移動端瀏覽器即使安裝了該應用也無法喚醒原生應用蒂秘，因為它認為URL Scheme是一種潛在的危險行為而禁用它泽本，像Safari和微信瀏覽器。還好微信瀏覽器可開啟白名單讓URL Scheme有效姻僧。
若在頁面引用第三方原生應用的URL Schema规丽，可通過抓包第三方原生應用獲取其URL。
```
<a href="weixin://">打開微信</a>
<!-- 打開支付寶 -->
<a href="alipays://">打開支付寶</a>
<!-- 打開支付寶的掃一掃 -->
<a href="alipays://platformapi/startapp?saId=10000007">打開支付寶的掃一掃</a>
<!-- 打開支付寶的螞蟻森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打開支付寶的螞蟻森林</a>
```
禁止頁面縮放
在智能手機的普及下撇贺，很多網站都具備桌面端和移動端兩種瀏覽版本赌莺，因此無需雙擊縮放查看頁面。禁止頁面縮放可保障移動端瀏覽器能無遺漏地展現(xiàn)頁面所有布局松嘶。
```
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
```
禁止頁面緩存
「Cache-Control」指定請求和響應遵循的緩存機制艘狭，不想使用瀏覽器緩存就禁止唄！
```
<meta http-equiv="Cache-Control" content="no-cache">
```
禁止字母大寫
有時在輸入框里輸入文本會默認開啟首字母大寫糾正翠订，就是輸入首字母小寫會被自動糾正成大寫巢音，特么的煩。直接聲明autocapitalize=off關閉首字母大寫功能和autocorrect=off關閉糾正功能尽超。
```
<input autocapitalize="off" autocorrect="off">
```
針對Safari配置
貼一些Safari較零散且少用的配置官撼。
```
<!-- 設置Safari全屏，在iOS7+無效 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 改變Safari狀態(tài)欄樣式似谁，可選default/black/black-translucent傲绣，需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加頁面啟動占位圖 -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
<!-- 保存網站到桌面時添加圖標 -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
<!-- 保存網站到桌面時添加圖標且清除默認光澤 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">
```
針對其他瀏覽器配置
貼一些其他瀏覽器較零散且少用的配置，主要是常用的QQ瀏覽器巩踏、UC瀏覽器和360瀏覽器秃诵。從網易MTL的測試數(shù)據得知，新版的QQ瀏覽器和UC瀏覽器已不支持以下<meta>聲明了塞琼。
```
<!-- 強制QQ瀏覽器豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 強制QQ瀏覽器全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 開啟QQ瀏覽器應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 強制UC瀏覽器豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 強制UC瀏覽器全屏 -->
<meta name="full-screen" content="yes">
<!-- 開啟UC瀏覽器應用模式 -->
<meta name="browsermode" content="application">
<!-- 開啟360瀏覽器極速模式 -->
<meta name="renderer" content="webkit">
```
讓:active有效顷链，讓:hover無效
有些元素的:active可能會無效，而元素的:hover在點擊后會一直處于點擊狀態(tài)屈梁，需點擊其他位置才能解除點擊狀態(tài)。給<body>注冊一個空的touchstart事件可將兩種狀態(tài)反轉榛了。
```
<body ontouchstart></body>
```