1.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上自動識別郵箱做了限制。
2.獲取滾動條的值：
window.scrollY window.scrollX
pc端活動滾動條的值可以用document.scrollTop得到的，但是在ios上，這兩個值是未定義的，因為ios沒有滾動條的定義，在Android中通過這兩個屬性可以正常獲取到滾動條的值。在ios上要用window.scrollY window.scrollX，Android也支持。
3.禁止選擇文本：
-webkit-user-select:none
禁止用戶選擇文本，ios和android都支持
4.屏蔽陰影：
-webkit-appearance:none
親測，可以同時屏蔽輸入框怪異的內陰影，解決iOS下無法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性后，iOS下默認還是帶有圓角的，不過可以使用 border-radius屬性修改。
5.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的邊框，怎么辦？這樣編寫代碼必然導致出現橫向滾動條。這時就用到了border-box了。
6.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表示需要顯示幾行。
7.移動端touch事件：
- touchstart //當手指接觸屏幕時觸發
- touchmove //當已經接觸屏幕的手指開始移動后觸發
- touchend //當手指離開屏幕時觸發
- touchcancel//當某種touch事件非正常結束時觸發
這4個事件的觸發順序為：
touchstart -> touchmove -> touchend ->touchcancel
對于某些android系統touch的bug:
比如手指在屏幕由上向下拖動頁面時，理論上是會觸發 一個 touchstart ，很多次 touchmove ，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發一次，觸發時間和touchstart 差不多，而touchend直接沒有被觸發解決辦法就是用settimeout來稀釋touchmove,或者可以用到zepto.js封裝的方法。
8.單擊延遲：
click 事件因為要等待雙擊確認，會有 300ms 的延遲，體驗并不是很好。
開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。
9.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不參與滾動，只讓其下面滾動。
10.base64編碼圖片替換url圖片
u在移動端，網絡請求是很珍貴的資源，尤其在2g或者3g網絡下，所以能不發請求的資源都盡量不要發，對于一些小圖片icon之類的，可以將圖片用base64編碼，來減少網絡請求。
11.動畫效果時開啟硬件加速：
我們在制作動畫效果時經常會想要改版元素的top或者left來讓元素動起來，在pc端還好但是移動端就會有較大的卡頓感，這么我們需要使用css3的 transform: translate3d;來替換，
此效果可以讓瀏覽器開啟gpu加速，渲染更流暢，但是筆著實驗時在ios上體驗良好，但在一些低端android機型可能會出現意想不到的效果。
12.ios和android局部滾動時隱藏原生滾動條
android：
::-webkit-scrollbar{
opacity: 0;
}
ios：
使用一個稍微高一些div包裹住這個有滾動條的div然后設置overflow:hidden擋住
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
<div class="wrap">
<div class="box"></div>
</div>
12.設置placeholder時候 focus時候文字沒有隱藏：
input:focus::-webkit-input-placeholder{
opacity: 0;
}
