IOS 前端兼容,webapp常见问题

1.解决滑动卡顿/不流畅/掉帧

-webkit-overflow-scrolling: touch;

 

2.禁止input弹出键盘

<input type="text" onfocus='this.blur();'/>

 

3.禁止长按保存图片

img{ pointer-events:none;}

 

4.禁止点击产生灰色高亮背景

-webkit-tap-highlight-color:rgba(0,0,0,0);

 

5.尽量不要用position:fixed，fixed通常都是用于底/顶部导航栏或者顶部标题栏，如果非要用，那么要将内容与标题独立开，不要混在一起，混在一起会出现fixed失效或者其他神奇特效。

 

6.flex弹性盒子兼容老版本

{ display:flex; display:-ms-flexbox; display:-webkit-flex; }

{-webkit-box-pack:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;}

{-webkit-box-align:center; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center; }

{-webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -o-flex-direction:column; flex-direction:column;}

{-webkit-flex-direction:row; -moz-flex-direction:row; -ms-flex-direction:row; -o-flex-direction:row; flex-direction:row;}

 

7.JQuery事件

ios中不允许将点击事件绑定在document或者body上，如果绑定上的话将会失效。
$(document).on('click', '#comedy', function(){})... //无效
$("body").on('click', '#comedy', function(){})... //无效

 

 

//待续