移动端(ipad)h5页面体验解决方案

移动端(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
)
}