手机端h5 ios和Android的一些兼容问题

最近做了个手机端项目在Android和ios下各种兼容的调试，给大家列出几个常见问题的解决方案

1.在Android下滑动不流畅问题，这个滑动不流畅好像局限于局部的滚动，建议都写成 全局滚动，在css样式中加上：

 -webkit-overflow-scrolling: touch; 

解决流畅度。

2.ios下 下拉 上滑 会出现出界情况 浏览器自带黑色背景色，解决方案：

使用 scrollfix.js 组件 进行设置。引入后加入 所要滑动的id模块。

var scrollable1 = document.getElementById("talklist");

new ScrollFix(scrollable1);

给大家一个下载地址：链接: 百度网盘 密码: 5j8a。

3.在开发微信号时候 Android和ios下点击返回键  会直关闭页面 对用户交互效果很不好，所以要用js控制下返回键 返回到自己要去的页面：

window.addEventListener("popstate", function(e) {

location.replace(location.href);

}, false);

function pushHistory() {

    var state = {

        title: "title",

        url: "#"

    };

    window.history.pushState(state, "title", "#");

}

pushHistory();

粘贴到代码中 测试下 你会看到效果。

4.是图片填充到外层的框内，很好用，直接给图片添加样式。

object-fit: cover;

width:100%;

height:100%;

5.手机端按住不放 阻止浏览器默认响应事件 调试

//clikMenu 你要点击的事件节点

function touchendmovie(clikMenu){

var timeOutEvent = 0;

$(document).on('touchstart',clikMenu,function(e){

timeOutEvent = setTimeout(function(){

//这里编写你要执行的事件 },300);

//这里设置长按响应时间

e.preventDefault();

});

$(document).on('touchmove',clikMenu,function(e){

clearTimeout(timeOutEvent);

timeOutEvent = 0;

});

$(document).on('touchend',clikMenu,function(e){

e.stopPropagation();

if(timeOutEvent != 0 ){

console.log('这里是点击了一下'); }

clearTimeout(timeOutEvent); });

}