移动端兼容

Posted 2020-11-22 qlongbg

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);
});