最近做了个手机端项目在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); });
}