坑！！！高清解决方案导致iOS 上h5页面滑不动的解决办法

旧城等待， 2023-05-30 15:54 21阅读 0赞

首选这个问题出现在我们一个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][https_blog.csdn.net_qq_39198420_article_details_76502267]

//  添加滑动监听事件
          let startx = 0
          let 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 - x
            const angy = endy - y
            let 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].pageX
            starty = e.touches[0].pageY
          }, false)
          // 手指离开屏幕
          document.addEventListener('touchend', e => {
            const endx = e.changedTouches[0].pageX
            const endy = e.changedTouches[0].pageY
            const direction = getDirection(startx, starty, endx, endy)
            switch (direction) {
              case 0:
                console.log('未滑动！')
                break
              case 1:
                console.log('向上！')
                break
              case 2:
                console.log('向下！')
                break
              case 3:
                console.log('向左！')
                break
              case 4:
                console.log('向右！')
                break
              default:
                console.log('default')
            }
          }, false)

最后是大佬告诉我是app上的body高度有问题， 安卓body高度是页面屏幕，ios是整个页面内容，估计是阿里检测那个屏幕dpr有问题， 有的手机不对，不过要手动给html设置字体大小了。

所以就是要禁止阿里的高清解决方案，然后手动设置字体大小

forbidden-h-d.js

export default (
      () => {
        const scale = 1
        window.viewportScale = 1
        const 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()
        }

[https_blog.csdn.net_qq_39198420_article_details_76502267]: https://blog.csdn.net/qq_39198420/article/details/76502267