標籤：
Meta標籤：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />這個想必大家都知道，當頁面在手機上顯示時，增加這個meta可以讓頁面強制讓文檔的寬度與裝置的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許使用者點擊螢幕放大瀏覽。
<meta content="telephone=no" name="format-detection" /><meta content="email=no" name="format-detection" />這兩個屬性分別對ios上自動識別電話和android上自動識別郵箱做了限制。
擷取捲軸的值：
window.scrollY window.scrollX案頭瀏覽器中想要擷取捲軸的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會發現這兩個屬性是未定義的，為什麼呢？因為在iOS中沒有捲軸的概念，在Android中通過這兩個屬性可以正常擷取到捲軸的值，那麼在iOS中我們該如何擷取捲軸的值呢？就是上面兩個屬性，但是事實證明android也支援這屬性，所以索性都用woindow.scroll.
禁止選擇文本：
-webkit-user-select:none禁止使用者選擇文本，ios和android都支援
屏蔽陰影：
-webkit-appearance:none親測，可以同時屏蔽輸入框怪異的內陰影，解決iOS下無法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下預設還是帶有圓角的，不過可以使用 border-radius屬性修改。
css之border-box：
element{ width: 100%; padding-left: 10px; box-sizing:border-box; -webkit-box-sizing:border-box; border: 1px solid blue;}那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎麼辦？這樣編寫代碼必然導致出現橫向捲軸，腫麼辦？要相信問題就是用來解決的。這時候偉大的css3為我們提供了box-sizing屬性，對於這個屬性的具體解釋不做贅述（想深入瞭解的同學可以到w3school查看，要知道自己動手會更容易記憶）。讓我們看看如何解決上面的問題：
css3多文本換行：
p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}Webkit支援一個名為-webkit-line-clamp的屬性，參見連結，也就是說這個屬性並不是標準的一部分，可能是Webkit內部使用的，或者被棄用的屬性。需要注意的是display需要設定成box，-webkit-line-clamp表示需要顯示幾行。
Retina螢幕高清圖片：
selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;}image-set的文法，類似於不同的文本，映像也會顯示成不同的：
不支援image-set：在不支援image-set的瀏覽器下，他會支援background-image映像，也就是說不支援image-set的瀏覽器下，他們解析background-image中的背景映像；
支援image-set：如果你的瀏覽器支援image-sete，而且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景映像；
Retina螢幕下的image-set：如果你的瀏覽器支援image-set，而且是在Retina螢幕下，此時瀏覽器會選擇image-set中的@2x背景映像。
html5重力感應事件：
if (window.DeviceMotionEvent) { window.addEventListener(‘devicemotion‘,deviceMotionHandler, false); } var speed = 30;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) { //簡單的搖一搖觸發代碼 alert(1); } lastX = x; lastY = y; lastZ = z; }關於deviceMotionEvent是HTML5新增的事件，用來檢測手機重力感應效果具體可參考http://w3c.github.io/deviceorientation/spec-source-orientation.html
移動端touch事件：
touchstart //當手指接觸螢幕時觸發
touchmove //當已經接觸螢幕的手指開始移動後觸發
touchend //當手指離開螢幕時觸發
touchcancel//當某種touch事件非正常結束時觸發
這4個事件的觸發順序為：
touchstart -> touchmove -> touchend ->touchcancel
對於某些android系統touch的bug:
比如手指在螢幕由上向下拖動頁面時，理論上是會觸發 一個 touchstart ，很多次 touchmove ，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發一次，觸發時間和touchstart 差不多，而touchend直接沒有被觸發。這是一個非常嚴重的bug，在google Issue已有不少人提出 ,這個很蛋疼的bug是在類比下拉重新整理是遇到的尤其當touchmove的dom節點數量變多時比出現，當時解決辦法就是用settimeout來稀釋touchmove。
單擊延遲：
click 事件因為要等待雙擊確認，會有 300ms 的延遲，體驗並不是很好。
開發人員大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。
Creating Fast Buttons for Mobile Web Applications
Eliminate 300ms delay on click events in mobile Safari
IOS裡面fixed的文字框焦點置中
<!DOCTYPE html> <head> input { position:fixed; top:0;left:0; } </head> <body> <div class="header"> <form action=""> <label>Testfield: <input type="text" /></label> </form> </div> </body></html>在ios裡面，當一個文字框的樣式為fixed時候，如果這個文字框獲得焦點，它的位置就會亂掉，由於ios裡面做了自適應置中，這個fixed的文字框會跑到頁面中間。
解決辦法有兩個：
可以在文字框獲得焦點的時候將fixed改為absolute，失去焦點時在改回fixed，但是這樣會讓螢幕有上下滑動的體驗不太好。
.fixfixed {position:absolute;}$(document) .on(‘focus‘, ‘input‘, function(e) { $this.addClass(‘fixfixed‘); }) .on(‘blur‘, ‘input‘, function(e) { $this.removeClass(‘fixfixed‘); });還有一種就是用一個假的fixed的文字框放在頁面頂部，一個absolute的文字框隱藏在頁面頂部，當fixed的文字框獲得焦點時候將其隱藏，然後顯示absolute的文字框，當失去焦點時，在把absolute的文字框隱藏，fixed的文字框顯示。
.fixfixed {position:absolute;}$(document) .on(‘focus‘, ‘input‘, function(e) { $absolute..show(); $this.hide(); }) .on(‘blur‘, ‘input‘, function(e) { $fixed..show(); $this.hide(); });最後一種就是頂部的input不參與滾動，只讓其下面滾動。
position:sticky
position:sticky是一個新的css3屬性，它的表現類似position:relative和position:fixed的合體，在目的地區域在螢幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目的地區域時，它的表現就像position:fixed，它會固定在目標位置。
.sticky { position: -webkit-sticky; position:sticky; top: 15px; }瀏覽器安全色性：
由於這是一個全新的屬性，以至於到現在都沒有一個規範，W3C也剛剛開始討論它，而現在只有webkit nightly版本和chrome 開發版(Chrome 23.0.1247.0+ Canary)才開始支援它。
另外需要注意的是，如果同時定義了left和right值，那麼left生效，right會無效，同樣，同時定義了top和bottom，top贏～～
移動端點透事件
簡單的說，由於在移動端我們經常會使用tap(touchstart)事件來替換掉click事件，那麼就會有一種情境是：
<div id="mengceng"></div><a href="www.qq.com">www.qq.com</a>div是絕對位置的蒙層z-index高於a，而a標籤是頁面中的一個連結，我們給div綁定tap事件：
$(‘#mengceng‘).on(‘tap‘,function(){$(‘#mengceng‘).hide();});我們點擊蒙層時 div正常消失，但是當我們在a標籤上點擊蒙層時，發現a連結被觸發，這就是所謂的點透事件。
原因：
touchstart 早於 touchend 早於 click。亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之後蒙層隱藏，此時click還沒有觸發，300ms之後由於蒙層隱藏，我們的click觸發到了下面的a連結上。
解決辦法：
1 盡量都使用touch事件來替換click事件。
2 阻止a連結的click的preventDefault
base64編碼圖片替換url圖片
u在移動端，網路請求是很珍貴的資源，尤其在2g或者3g網路下，所以能不發請求的資源都盡量不要發，對於一些小圖片icon之類的，可以將圖片用base64編碼，來減少網路請求。
手機拍照和上傳圖片
<!-- 選擇照片 --><input type=file accept="image/*"><!-- 選擇視頻 --><input type=file accept="video/*">動畫效果時開啟硬體加速
我們在製作動畫效果時經常會想要改版元素的top或者left來讓元素動起來，在pc端還好但是移動端就會有較大的卡頓感，這麼我們需要使用css3的 transform: translate3d;來替換，
此效果可以讓瀏覽器開啟gpu加速，渲染更流暢，但是筆著實驗時在ios上體驗良好，但在一些低端android機型可能會出現意想不到的效果。
快速回彈滾動
在iOS上如果你想讓一個元素擁有像 Native 的滾動效果，你可以這樣做：
.div { overflow: auto; -webkit-overflow-scrolling: touch; }經筆著測試，此效果在不同的ios系統資料表現不一致，
對於局部滾動，ios8以上，不加此效果，滾動的超級慢，ios8一下，不加此效果，滾動還算比較流暢
對於body滾動，ios8以上，不加此效果同樣擁有彈性滾動效果。
持續更新中。。
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
移動WEB問題小結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
