1.有時候一些元素辜纲，如label,span,div等，"非點擊"元素赠橙，在ios上無法觸發(fā)click事件散吵，這時候可以給元素加上：
cursor:pointer;
2.safari瀏覽器里龙考，position的兩個定位都要寫，只寫一個容易錯亂
<div class="header">我是吸頂頭部啊~</div>
<div class="container">我是中間內(nèi)容啊~</div>
<div class="footer">我是吸底尾部啊~</div>
.header{
width:100%;
height:66px;
position:fixed;
top:0;
left:0;
}
.container{
width:100%;
height:auto;
position:absolute;
box-sizing:border-box;
padding-top:66px;
padding-botton:66px;
overflow-y:auto;
}
.footer{
width:100%;
height:66px;
postion:fixed;
left:0;
bottom:0;
}
3.移動端輸入框彈起影響布局矾睦。使用 scrollIntoViewIfNeeded
window.addEventListener('risize',function(){
if(document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA"){
window.setTimeout(function(){
document.activeElementt.scrollIntoViewIfNeeded();
},0);
}
})
4頁面滑動的時候會有卡頓或者失去慣性
-webkit-overflow-scrolling:touch
不過這個屬性要給fixed的元素
真機有效晦款。為了解決有時候fixed是動態(tài)添加，結(jié)合js枚冗。
//彈窗顯示的事件
$('.dialogShow').on('click',function(){
//彈窗顯示
$('.dialog').show();
//給該彈窗添加ios safari專用潤滑劑
$('.iosWeb').css('-webkit-overflow-scroll','touch');
})
//隱藏彈窗的事件
$('.doalogHide').on('click',function(){
//彈窗隱藏
$('.dialog').hide();
//去掉ios safari專用潤滑劑
$('.iosWeb').css('-webkit-overflow-scroll','auto');
})
5.移動端有時候input的placeholder文字會上移
line-height:normal
6.300ms延遲
touch-action: manipulation
6.頁面出現(xiàn)彈層時缓溅，禁止頁面觸發(fā)滾動
//彈層喚起事件
$("html,body").css({"overflow":"hidden"})
//彈層關(guān)閉事件中
$("html,body").css({"overflow":"auto"})
這樣可以解決，還有一種辦法
//出來
el.style.webkitOverflowScrolling = 'auto';
//出去
el.style.webkitOverflowScrolling = 'touch'
