移动端兼容

时间:2021-09-24 05:22:34

1. IOS上click点击事件会有300ms的延迟响应:

  换用zepto的touch模块,tap事件也是为了解决在click的延迟问题

2. 一些情况下对非可点击元素如(label,span)监听click时间,ios下不会触发:

  css增加cursor:poiner就搞定了

3. 移动端页面滚动滞涩感:

  css在body元素上添加-webkit-overflow-scrolling: touch;

4. 软键盘与输入框问题:

  h5页面有个问题就是,当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决:

var oHeight = $(document).height(); //浏览器当前的高度
   
$(window).resize(function(){
    if($(document).height() < oHeight){
        $("#footer").css("position","static");
    }else{
        $("#footer").css("position","absolute");
    }    
});

5. 另一软键盘输入框问题,也可视为fixed定位失败问题,ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位

  可参考链接解决:http://efe.baidu.com/blog/mobile-fixed-layout/

6. audio元素和video元素现在无法自动播放问题,改触屏播放:

$(html).one(touchstart,function(){
    audio.play()
})

7. 阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

8. 移动端某些情况下input的placeholder会出现文本位置偏上的现象:

  PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置line-height:normal

9. 点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中,对于这种往返缓存问题可以:

  一种方法,可以:

window.onunload = function(){};

  另外,也可给script标签添加一个随机参数:

<script src="../../js/university-introduction/university-filter.js?"  Math.random()></script>

10. 修改移动端的点击高亮效果:

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

11. zepto的点透问题

  引入fastclick.js,在页面中加入如下js代码

window.addEventListener( "load", function() {
     FastClick.attach( document.body );
}, false );

  或者有zepto或者jQuery的js里面加上

$(function() {
     FastClick.attach(document.body);
});