背景
開始
1px邊框
一般是採用偽元素模擬的方式
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
複製程式碼其他border-shadow，svg的方式也可以，根據專案實際情況選擇，如果專案移動端適配用的flexible.js做適配，那就很容易做到。
具體幾種方法詳見：
點透問題
一般懶人處理點透的方案都是引用fastclick，但是這個外掛在某些場景下也有坑，一般要用它的話最好fork下原始碼然後修改一下，開發中遇到了以下2個坑：
1.安卓某些版本觸發兩次點選問題
2.游標移位問題（這個問題排查了了好久才找到是fastclick的問題）
鍵盤遮擋輸入框問題
這種輸入在頁面下方的佈局也很常見，一般評論，留言，聊天都會使用這種佈局，但是有時候彈起的鍵盤會蓋住輸入框，解決方案如下：
移動web頁面，input獲取焦點彈出系統虛擬鍵盤時，擋住input，求解決方案？
浮層上進行滑動，浮層下面的頁面也跟著滾動
web移動端浮層滾動阻止window窗體滾動JS/CSS處理
安卓border-radius:50%不圓
使用了rem做適配後使用具體值設定border-radius，不要用百分比，否則有些安卓機上50%是個橢圓形。
安卓元素無法垂直居中問題
這個我line-height居中，定位+transform，flex居中都試過，但都是偏上一些，不能垂直居中，最後還是用的zoom解決。
安卓部分版本input裡的placeholder位置偏上
把input的line-height設為normal
input{
line-height:normal
};複製程式碼詳細原理看stackoverflow上的這個回答：
ios的body設定overflow:hidden後仍然可以滾動
一般在所有元素最外層再包一個大盒子.wrapper
.wrapper{
position:relative;
overflow:hidden;
}複製程式碼stackoverflow上有好幾種處理方法，可以順便參考下：
Does overflow:hidden applied to <body> work on iPhone Safari?
ios fixed佈局問題
這種輸入框在固定在最上面佈局很常見，但是用ios下當鍵盤彈起時fixed會失效。解決辦法在下面文章裡：
一句話解釋就是把頁面滾動改為容器內滾動。
ios日期轉換NAN問題
JavaScript中的Date物件在Safari與IOS中的“大坑”
ios滾動卡頓
滾動的容器加上這個
-webkit-overflow-scrolling: touch;
複製程式碼ios滾動時動畫停止
移動端滾動懶人推薦使用better-scroll，很好的外掛
ios滾動動畫停止的原因及其他解決辦法：CSS3 動畫在 iOS 上為什麼會因為頁面滾動也停止？
長按閃退
element {
-webkit-touch-callout:none;
}
複製程式碼禁止數字識別為電話號碼
<meta name = "format-detection" content = "telephone=no">
複製程式碼取消點選高亮
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);複製程式碼手機旋轉時禁止字型大小自動變化
-webkit-text-size-adjust:100%;
複製程式碼transition閃屏
.box {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
} 複製程式碼CSS3動畫卡頓
儘量使用transform，避免使用height,width,margin,padding等。可以開啟GPU硬體加速，但用硬體加速的時候也要注意，因為這個也有坑，不合理使用反而會讓應用越來越卡！