ios 微信返退键不能刷新页面
var UA = navigator.userAgent;
var isIOS = !!UA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/i) || !!UA.match(/\(Maci[^;]+; .+Mac OS X/i);
var isWX = /micromessenger/i.test(UA);
if(isWX && isIOS){
var isPageHide = false;
window.addEventListener('pageshow', function(){
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function(){
isPageHide = true;
});
}
禁止IOS双击自动滚动
/**
* 修复IOS10+, viewport的user-scalable无效的问题
* 添加下面样式:
* html,body{height: 100%;overflow: hidden;}
* body{overflow-y: scroll; -webkit-overflow-scrolling: touch; }
*/
(function(){
var UA = navigator.userAgent.toLowerCase();
if (UA.indexOf('iphone') >= 0 || UA.indexOf('ipad') >= 0) {
// 禁止IOS滚动时,放大
document.addEventListener('touchmove', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });
// 禁止IOS双击自动滚动
var iLastTouch = null;
document.addEventListener('touchend', function (event) {
var a = new Date().getTime();
iLastTouch = iLastTouch || a + 1;
var c = a - iLastTouch;
if (c < 500 && c > 0) {
event.preventDefault();
return false;
}
iLastTouch = a;
}, { passive: false });
// 手势
document.addEventListener('gesturestart', function(event) {
event.preventDefault();
}, { passive: false });
}
})();
阻止浏览器自带下拉滑动效果
// 阻止浏览器下拉滑动效果
var overscroll = function(el) {
el.addEventListener('touchstart', function() {
var top = el.scrollTop;
var totalScroll = el.scrollHeight;
var currentScroll = top + el.offsetHeight;
if(top === 0) {
el.scrollTop = 1;
} else if(currentScroll === totalScroll) {
el.scrollTop = top - 1;
}
});
el.addEventListener('touchmove', function(evt) {
console.log(evt.target);
if(evt.target.tagName === 'CANVAS'){
evt.preventDefault();
}
else if(el.offsetHeight < el.scrollHeight){
evt._isScroller = true;
}
});
}
overscroll(document.querySelector('#app'));
document.body.addEventListener('touchmove', function (evt) {
// 阻止默认的处理方式(阻止下拉滑动的效果)
if(!evt._isScroller) {
evt.preventDefault();
}
}, {passive: false}); // passive 参数不能省略,用来兼容ios和android