前言

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

1. viewport

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

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

1. 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 標籤解決的。

1. 設定頂部狀態列的顏色

<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。

1. webapp新增到主屏後的標題（iOS 6 新增）

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

1. 設定快取

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

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

1. format-detection

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

語法：

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

說明：

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

1. html5呼叫安卓或者ios的撥號功能

html5提供了自動呼叫撥號的標籤，只要在a標籤的href中新增tel:就可以了。

撥打手機直接如下:

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

PS：如果遇到這種情況失效，可以在頁面頭部 新增 上一條meta 標籤，content 設定為 yes。

1. iphone及ipad下輸入框默認出現內陰影。

Element{
  -webkit-appearance: none; 
}

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

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

• 給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>

1. iphone下 input 框游標過長

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

方法：

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

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

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

{
  -webkit-overflow-scrolling: touch;
}

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

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

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

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

方法一：

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

方法二：

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

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

1. 禁止複製、選中文字

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

1. 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的效果！

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

解決辦法：

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

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

WebView.setWebChromeClient()

1. 移動端點選300ms延遲

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

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

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

1. 移動端點選穿透問題

案例如下：

<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連結上。

解決辦法：

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中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

可以通過正則去掉

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: 如果是內嵌入 webview 下 還需要原生開發的夥伴新增以下支援程式碼：

webView.allowsInlineMediaPlayback = YES;

1. 移動端點選連結傳送郵件

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

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

PS: 如果遇到這種情況失效，可以在頁面頭部 新增 一條meta 標籤，content 設定為 yes。

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

1. 移動端滾動穿透

描述：

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

解決辦法：

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

1. 移動端佈局方式

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

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

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

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

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

後語

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