坑！！！高清解決方案導致iOS 上h5頁面滑不動的解決辦法

首選這個問題出現在我們一個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 = 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()
    }