移动端(ipad)h5页面体验解决方案
一.输入内容后,点击软键盘回车键不会自动收起键盘
回车自动收起
if (navigator.userAgent.match(/(iPhone|iPad|Android|ios|SymbianOS)/i)) {
window.addEventListener('keyup', (event) => {
event.keyCode === 13 && (document.activeElement as any).blur() // ts
event.keyCode === 13 && (document.activeElement).blur() // js
})
}
二.双击屏幕,页面会放大
// 禁止苹果手机或ipad在放大缩小
if (navigator.userAgent.match(/(iPhone|iPad|Android|ios|SymbianOS)/i)) {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault() //阻止元素的默认行为
}
})
var lastTouchEnd = 0
document.addEventListener(
'touchend',
function(event) {
var now = new Date().getTime()
if (now - lastTouchEnd <= 300) {
event.preventDefault()
}
lastTouchEnd = now //当前为最后一次触摸
},
false
)
}