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

前言

最近在公司寫一個混合 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:pubdreamcc@qq.com?subject=TestObject">pubdreamcc@qq.com</a>

點擊後直接給 pubdreamcc@qq.com 發郵件，主題爲：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 佈局。

這部分你們能夠本身網上查閱相關資料，我這裏就很少作累述了。

原文地址：http://www.javashuo.com/article/p-qglxpjmv-o.html