前言最近在公司寫一個混合 app 項目，頁面基本全部都是用 H5 完成，嵌入到原生 webview 下。發現一個問題，在 iPhone 6 下蘋果手機的狀態欄會擋住頁面，導致頁面下移，樣式錯亂，最後網上查找了些解決辦法，加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的 ...

前言

最近在公司寫一個混合 app 項目，頁面基本全部都是用 H5 完成，嵌入到原生 webview 下。發現一個問題，在 iPhone 6 下蘋果手機的狀態欄會擋住頁面，導致頁面下移，樣式錯亂，最後網上查找了些解決辦法，加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的meta標簽及一些小技巧。

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

這個是移動端頁面開發必備的標簽，用來調整佈局視口同視覺視口一致，禁止頁面縮放等。

apple-mobile-web-app-capable

apple-mobile-web-app-capable 是設置 Web 應用是否以全屏模式運行。

語法：

<meta name="apple-mobile-web-app-capable" content="yes">

說明：

如果 content 設置為yes，Web應用會以全屏模式運行，反之，則不會。content的預設值是no，表示正常顯示。如果選擇全屏模式運行，則會刪除預設的蘋果工具欄和菜單欄。

我開篇遇到的問題就是通過設置該 meta 標簽解決的。

設置頂部狀態欄的顏色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

說明：

這個標簽起作用的前提是必須事先開啟了全屏模式運行 webapp，即第二條的 meta 標簽必須同步指定，否則這個標簽不起作用。

如果content設置為default，則狀態欄正常顯示。如果設置為blank，則狀態欄會有一個黑色的背景。如果設置為blank-translucent，則狀態欄顯示為黑色半透明。如果設置為default或blank，則頁面顯示在狀態欄的下方，即狀態欄占據上方部分，頁面占據下方部分，二者沒有遮擋對方或被遮擋。如果設置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。預設值是default。

webapp添加到主屏後的標題（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="title">

設置緩存

<meta http-equiv="Cache-Control" content="no-cache" />

手機頁面通常在第一次載入後會進行緩存，然後每次刷新會使用緩存而不是去重新向伺服器發送請求。如果不希望使用緩存可以設置no-cache。

format-detection

format-detection 啟動或禁用自動識別頁面中的電話號碼。

語法：

<meta name="format-detection" content="telephone=no">

說明：

預設情況下，設備會自動識別任何可能是電話號碼的字元串。設置telephone=no可以禁用這項功能。

html5調用安卓或者ios的撥號功能

html5提供了自動調用撥號的標簽，只要在a標簽的href中添加tel:就可以了。

撥打手機直接如下:

<a href="tel:15677776767">點擊撥打15677776767</a>

PS：如果遇到這種情況失效，可以在頁面頭部添加上一條meta 標簽，content 設置為 yes。

iphone及ipad下輸入框預設出現內陰影。

Element{
  -webkit-appearance: none; 
}

移動端滑動頁面絕對定位元素出現抖動

這個問題自己網上找了一些解決辦法，僅供參考。

給body設置高度100%

body,html{
    widht:100%;
    height:100%;
}

如果是項目中已經做好的頁面，有其他特效，直接設置這個屬性，可能對頁面的其他功能造成影響。

如果使用此法，本地調試效果不好，建議不要使用。

給固定定位的元素添加transform屬性

transform:translateZ(0);
或者
transform:translate3d(0,0,0);

外層嵌套一個盒子

多加一層盒子，外層fixed固定定位，內層的設置絕對定位absolute；

<div style='position: fixed;'>
  <div style='position: absolute'>
    ...
  </div>
</div>

iphone下 input 框游標過長

input 輸入框在 iPhone 下游標過長，Android顯示正常。

方法：

調低 input 標簽的 line-height 樣式值。

ios 下頁面滑動卡頓，不流暢

在內容出現滾動的元素上設置一條css樣式，實現慣性滾動和彈性效果。

{
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果，它有兩個值：

auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。

touch:
使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

頁面頂部固定定位元素或底部固定定位元素遮擋頁面部分內容。

方法一：

給最外層的div加上 padding-bottom，值為固定定位元素高度；

方法二：

利用偽元素，給最外層div添加偽元素 after，設置高度為固定定位元素高度。


.wrapper::after{
  content: '';
  height: '固定定位元素高度';
}

禁止複製、選中文本

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

IOS中input鍵盤事件keyup、keydown、keypress支持不是很好

用input search做模糊搜索的時候，在鍵盤裡面輸入關鍵詞，會通過ajax後臺查詢，然後返回數據，然後再對返回的數據進行關鍵詞標紅。用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才能相應！

解決辦法：

可以用html5的oninput事件去代替keyup

<input type="text" id="test">
<script type="text/javascript">
  document.getElementById('test').addEventListener('input', function(e){
      var value = e.target.value
      ....
  })
</script>

然後就達到類似keyup的效果！

webview 下部分 JavaScript 代碼沒有執行，比如 alert()等。

解決辦法：

webview只是一個承載體、各種內容的渲染需要使用webviewChromClient去實現、所以set一個預設的基類WebChromeClient就行。

PS：這部分需要原生開發協助設置一個基類 WebChromeClient，代碼:

WebView.setWebChromeClient()

移動端點擊300ms延遲

300ms 尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致用戶體驗並不是很好，解決這個問題，我們一般在移動端用 tap 事件來取代click 事件。

推薦兩個 js，一個是 fastclick，一個是 tap.js。

關於移動端點擊延遲處理方案，詳細敘述請看：移動端點擊延遲處理方案

移動端點擊穿透問題

案例如下：

<div id="haorooms">點透事件測試</div>
<a href="http://www.baidu.com">百度</a>

div是絕對定位的蒙層, 並且z-index高於a。而a標簽是頁面中的一個鏈接，我們給div綁定tap事件：


$('#haorooms').on('tap',function(){
  $('#haorooms').hide()
})

我們點擊蒙層時 div正常消失，但是當我們在a標簽上點擊蒙層時，發現a鏈接被觸發，這就是所謂的點透事件。

原因：

touchstart 早於 touchend 早於click。亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之後蒙層隱藏，此時 click還沒有觸發，300ms之後由於蒙層隱藏，我們的click觸發到了下麵的a鏈接上。

解決辦法：

儘量都使用 touch 事件來替換click事件。例如用touchend事件(推薦)。
用 fastclick，詳情看上面 GitHub 倉庫。
用preventDefault阻止a標簽的click。
延遲一定的時間(300ms+)來處理事件（不推薦）。
以上一般都能解決，實在不行就換成click事件。

下麵介紹一下touchend事件，如下：


$("#haorooms").on("touchend", function (event) {
   event.preventDefault()
 
 })

iOS中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

可以通過正則去掉

this.value = this.value.replace(/\u2006/g, '')

解決 iOS 中 video 標簽視頻自動全屏播放問題

給 video 標簽添加屬性：

<!-- 針對 iOS8，9下生效  -->
<video webkit-playsinline="webkit-playsinline"></video>

<!-- ios10 及以上 -->

<video playsinline="playsinline"></video>

PS: 如果是內嵌入 webview 下還需要原生開發的伙伴添加以下支持代碼：

webView.allowsInlineMediaPlayback = YES;

移動端點擊鏈接發送郵件

<a href="mailto:[email protected]?subject=TestObject">[email protected]</a>

點擊後直接給 [email protected] 發郵件，主題為：TestObject 。

PS: 如果遇到這種情況失效，可以在頁面頭部添加一條meta 標簽，content 設置為 yes。

<meta name="format-detection" content="email=yes">

移動端滾動穿透

描述：

　在打開的彈窗或者遮罩層上滾動，會影響到下層的body元素的滾動。體驗很不好。

解決辦法：

一般思路是在打開彈框或遮罩層的時候，獲取html的scrollTop，給body改為fixed定位， top值為負的scrollTop值。關閉彈框的時候，把fixed定位去掉。還原scrollTop值。

移動端佈局方式

這個基本是我們做移動開發首先需要確定的一個方案，我總結為一句話：

經典的 REM 佈局與新秀 VW 佈局

當然還有常見的比如彈性盒子（flex）都可以。

不過需要說的是，淘寶 flexible.js 佈局的作者已經推薦我們選用 vw 佈局。

這部分大家可以自己網上查閱相關資料，我這裡就不多做累述了。

後語

本人平時寫的一些前端知識點都會放在自己的 GitHub 倉庫下，歡迎大伙輕噴，哈哈。

移動端開發必須知道的小技巧

前言

後語