前言

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

1. viewport

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

這個是移動端頁面開發(fā)必備的標簽，用來調(diào)整布局視口同視覺視口一致，禁止頁面縮放等。

1. apple-mobile-web-app-capable

apple-mobile-web-app-capable 是設(shè)置 Web 應(yīng)用是否以全屏模式運行。

語法：

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

說明：

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

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

1. 設(shè)置頂部狀態(tài)欄的顏色

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

說明：

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

如果content設(shè)置為default，則狀態(tài)欄正常顯示。如果設(shè)置為blank，則狀態(tài)欄會有一個黑色的背景。如果設(shè)置為blank-translucent，則狀態(tài)欄顯示為黑色半透明。如果設(shè)置為default或blank，則頁面顯示在狀態(tài)欄的下方，即狀態(tài)欄占據(jù)上方部分，頁面占據(jù)下方部分，二者沒有遮擋對方或被遮擋。如果設(shè)置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態(tài)欄遮蓋?。〞采w頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。默認值是default。

1. webapp添加到主屏后的標題（iOS 6 新增）

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

1. 設(shè)置緩存

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

手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務(wù)器發(fā)送請求。如果不希望使用緩存可以設(shè)置no-cache。

1. format-detection

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

語法：

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

說明：

默認情況下，設(shè)備會自動識別任何可能是電話號碼的字符串。設(shè)置telephone=no可以禁用這項功能。

1. html5調(diào)用安卓或者ios的撥號功能

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

撥打手機直接如下:

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

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

1. iphone及ipad下輸入框默認出現(xiàn)內(nèi)陰影。

Element{
  -webkit-appearance: none; 
}

1. 移動端滑動頁面絕對定位元素出現(xiàn)抖動

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

• 給body設(shè)置高度100%

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

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

如果使用此法，本地調(diào)試效果不好，建議不要使用。

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

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

• 外層嵌套一個盒子

多加一層盒子，外層fixed固定定位，內(nèi)層的設(shè)置絕對定位absolute；

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

1. iphone下 input 框光標過長

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

方法：

調(diào)低 input 標簽的 line-height 樣式值。

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

在內(nèi)容出現(xiàn)滾動的元素上設(shè)置一條css樣式，實現(xiàn)慣性滾動和彈性效果。

{
  -webkit-overflow-scrolling: touch;
}

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

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

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

1. 頁面頂部固定定位元素或底部固定定位元素遮擋頁面部分內(nèi)容。

方法一：

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

方法二：

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

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

1. 禁止復(fù)制、選中文本

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

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

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

解決辦法：

可以用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的效果！

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

解決辦法：

webview只是一個承載體、各種內(nèi)容的渲染需要使用webviewChromClient去實現(xiàn)、所以set一個默認的基類WebChromeClient就行。

PS：這部分需要原生開發(fā)協(xié)助設(shè)置一個 基類 WebChromeClient，代碼:

WebView.setWebChromeClient()

1. 移動端點擊300ms延遲

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

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

關(guān)于移動端點擊延遲處理方案，詳細敘述請看：移動端點擊延遲處理方案

1. 移動端點擊穿透問題

案例如下：

<div id="haorooms">點透事件測試</div>
<a href="http://inspiredelm.com">9252兒童網(wǎng)</a>

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

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

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

原因：

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

解決辦法：

1. 盡量都使用 touch 事件來替換click事件。例如用touchend事件(推薦)。

2. 用 fastclick，詳情看上面 GitHub 倉庫。

3. 用preventDefault阻止a標簽的click。

4. 延遲一定的時間(300ms+)來處理事件 （不推薦）。

5. 以上一般都能解決，實在不行就換成click事件。

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

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

1. iOS中，中文輸入法輸入英文時，字母之間可能會出現(xiàn)一個六分之一空格

可以通過正則去掉

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

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

給 video 標簽添加 屬性：

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

<!-- ios10 及以上 -->

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

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

webView.allowsInlineMediaPlayback = YES;

1. 移動端點擊鏈接發(fā)送郵件

<a href="mailto:pubdreamcc@qq.com?subject=TestObject">pubdreamcc@qq.com</a>

點擊后直接給 pubdreamcc@qq.com 發(fā)郵件，主題為：TestObject 。

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

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

1. 移動端滾動穿透

描述：

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

解決辦法：

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

1. 移動端布局方式

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

經(jīng)典的 REM 布局與新秀 VW 布局

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

不過需要說的是，淘寶 flexible.js 布局的作者已經(jīng)推薦我們選用 vw 布局。

這部分大家可以自己網(wǎng)上查閱相關(guān)資料，我這里就不多做累述了。