0
点赞
收藏
分享

微信扫一扫

前端歌谣-第壹佰零八课-屏幕适配代码


onMounted(() =>{
  // pad 环境
  if (isPad()) {
    scaleSize()
  } else {
    if (import.meta.env.DEV) {} else {
      hideView.value = isElectron();
    }
  }
})

// 屏幕适配
const scaleSize = () => {
  const standardScale = 1080 / 1920
  nextTick( ()=> {
    window.addEventListener('resize', debounce(function () {
      // alert(document.body.clientHeight + '*' + document.body.clientWidth)
      const docHeight = document.body.clientHeight
      const docWidth = document.body.clientWidth
      if (docWidth < 1680) {
        const currentScale = docHeight / docWidth
        let [scale, translate] = [0, 0]
        if (currentScale < standardScale) {
          // 以高度计算
          scale = docHeight / 1080
          const shouleWidth = 1920 * scale
          const offsetWidth = docWidth - shouleWidth
          translate = offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : ''
        } else {
          // 以宽度计算
          scale = docWidth / 1920
          const shouleHeight = 1080 * scale
          const offsetHeight = docHeight - shouleHeight
          translate = offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : ''
        }
        appRef.value.style.cssText = `transform: scale(${scale}) ${translate}; transform-origin: top left; min-width: 1920px; min-height: 1080px;`
      } else {
        appRef.value.style.cssText = ''
      }
    }),200)
    if (document.createEvent) {
      var event = document.createEvent('HTMLEvents')
      event.initEvent('resize', true, true)
      window.dispatchEvent(event)
    } else if (document.createEventObject) {
      window.fireEvent('onresize')
    }
  })
}

export const isPad = () => {
    return window.location.href.indexOf('pad') !== -1;
}

我是歌谣 开启你的领悟之路吧


举报

相关推荐

0 条评论