写H5页面总会碰上一些兼容性问题,之前也碰到了许多问题,但是都没有做一个完整的记录,之后碰到的问题都会记录下来。
1.使用table画表格时出现iOS 边框显示不完全
解决方法:有搜到相关问题,所给出的方法有:设置边框为1以上就可以了(尝试不成功),设置表格宽度为基数值如1,3,5(尝试不成功),然后自己想着办法设置td的边框为1px,然后解决。
2.使用移动端拖动组件react-draggable-tags的拖动和滚动区分
使用这个拖动组件会导致移动端无法区分到拖动还是滚动事件,解决办法,在拖动组件同级设置一个div,这个div高度和拖动dom结构等高,层级覆盖住需要覆盖的位置即可。
3.移动端使用location.reload(Boolean)方法加载页面没有重新请求接口
现状:部分安卓手机出现使用了该方法刷新页面之后没有请求接口
解决:使用window.location.href = location.href来重新加载页面
原因:在js文档中介绍href是location对象的一个属性,reload()则是location对象的方法。所以对于href,可以为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。对于reload()则是重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
但对于安卓手机微信中的浏览器,reload只是从缓存中装载文档,所以当你使用该方法,是失效的。
4.ios中的z-index失效问题
原因设置了iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效,适情况去掉即可
5.html2canvas在ios中截图时截取img失效
解决方法:通过设置一个div将图片设置成该div的背景图即可解决
6. 解决键盘弹出后挡表单的问题
window.addEventListener('resize', function() {
if(document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
window.setTimeout(function() {
if('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
});
7.解决ios12及以上,微信浏览器中,键盘收起,底部空白的问题
解决方式:判断当前环境,主动触发一下滚动事件
(function () {
if(platform === 'ios' && _includes(['wechat', 'miniApp'], ua)) {
document.body.addEventListener('focusout', ()=>{
// 滚动一下就会恢复
let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, currentPosition + 1);
});
}
}());
8.解决ios14 APP内 this.props.history.go()/ goBack() 不生效问题
解决方式:需要记录之前的路由,使用setTimeout进行延时跳转
setTimeout(()=> {
this.props.history.push({
pathname: '/Url',
search: '?queryparams',
});
}, 100)