ZGZQBWG/game/src/useFunctions/useSizeAdapt.js

// 用法：
// width: calc(950 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

import { onBeforeUnmount, ref } from 'vue'
import { userAgentInfo } from '@/store/non-reactive.js'

export default function useSizeAdapt(windowWidthWhenDesign = 1920, windowHeightWhenDesign = 1080) {
  const windowSizeInCssForRef = ref('')
  const windowSizeWhenDesignForRef = ref('')

  function compute() {
    if (window.innerWidth / window.innerHeight > windowWidthWhenDesign / windowHeightWhenDesign) {
      windowSizeWhenDesignForRef.value = windowHeightWhenDesign
      windowSizeInCssForRef.value = window.innerHeight + 'px' // 用100vh的话在移动端会有兼容性问题。
    } else {
      windowSizeWhenDesignForRef.value = windowWidthWhenDesign
      windowSizeInCssForRef.value = '100vw'
    }
  }

  compute()
  if (userAgentInfo.device.type !== 'mobile' || userAgentInfo.os.name === 'iOS') {
    window.addEventListener('resize', compute)
    onBeforeUnmount(() => {
      window.removeEventListener('resize', compute)
    })
  }

  return {
    windowSizeInCssForRef,
    windowSizeWhenDesignForRef,
  }
}