背景
開始
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硬體加速,但用硬體加速的時候也要注意,因為這個也有坑,不合理使用反而會讓應用越來越卡!