首选这个问题出现在我们一个h5页面的首页上,滑不动!在iPhone X和iPhone 11上并且系统版本发现是13.2.2,而iPhone X Max 系统版本12.2的并没有出现。所以我估摸着应该是iOS系统版本13.0以上都会有问题。
然后写了个监听容器滚动的方法,也是参考别人的代码:https://blog.csdn.net/qq_39198420/article/details/76502267
// 添加滑动监听事件let startx = 0let starty = 0// 获得角度const getAngle = (angx, angy) => {return (Math.atan2(angy, angx) * 180) / Math.PI}// 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动const getDirection = (x, y, endx, endy) => {const angx = endx - xconst angy = endy - ylet result = 0// 如果滑动距离太短if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {return result}const angle = getAngle(angx, angy)if (angle >= -135 && angle <= -45) {result = 1} else if (angle > 45 && angle < 135) {result = 2} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {result = 3} else if (angle >= -45 && angle <= 45) {result = 4}return result}// 手指接触屏幕document.addEventListener('touchstart', e => {startx = e.touches[0].pageXstarty = e.touches[0].pageY}, false)// 手指离开屏幕document.addEventListener('touchend', e => {const endx = e.changedTouches[0].pageXconst endy = e.changedTouches[0].pageYconst direction = getDirection(startx, starty, endx, endy)switch (direction) {case 0:console.log('未滑动!')breakcase 1:console.log('向上!')breakcase 2:console.log('向下!')breakcase 3:console.log('向左!')breakcase 4:console.log('向右!')breakdefault:console.log('default')}}, false)
最后是大佬告诉我是app上的body高度有问题, 安卓body高度是页面屏幕,ios是整个页面内容,估计是阿里检测那个屏幕dpr有问题, 有的手机不对,不过要手动给html设置字体大小了。
所以就是要禁止阿里的高清解决方案,然后手动设置字体大小
forbidden-h-d.js
export default (() => {const scale = 1window.viewportScale = 1const metaArr = document.head.getElementsByTagName('meta')for (let i = 0; i < metaArr.length; i++) {const metaEl = metaArr[i]if (metaEl.name === 'viewport') {metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${ scale },maximum-scale=${ scale },minimum-scale=${ scale }`)}}document.documentElement.style.fontSize = '50px'}
)
然后引入这个方法
import forbiddenHD from './forbidden-h-d'// 如果是iOS就禁止高清解决方案if (isIos()) {forbiddenHD()}