TangJiaWanFeiYi/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import SerialFrames from '@/components/SerialFrames.vue'
import TimeCommon from '@/components/times/timecommon.vue'

const app = createApp(App)
app.use(router)
.component('SerialFrames', SerialFrames)
.component('TimeCommon', TimeCommon)
.use(createPinia())
.mount('#app');

app.config.globalProperties.config = config

const idealWindowInnerHeight = 1015 // 设计稿的高度
const idealRootFontSize = 24 // 设计稿里选择的根元素尺寸
const appNode = document.querySelector('body')

if (/Mobi|Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/i.test(navigator.userAgent)) {
  app.config.globalProperties.$isMobile = true
  document.getElementById('app').classList.add('mobile')
  // 禁止多手指操作缩放
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  }, { passive: false, capture: true })

  // // 禁止双击放大
  // var lastTouchEnd = 0
  // document.documentElement.addEventListener('touchend', function(event) {
  //   var now = Date.now()
  //   if (now - lastTouchEnd <= 300) {
  //     event.preventDefault()
  //   }
  //   lastTouchEnd = now
  // }, {
  //   passive: false
  // })
} else {
  app.config.globalProperties.$isMobile = false
  // app.config.globalProperties.$isMobile = true
  // document.getElementById('app').classList.add('mobile')
}

if (/WeChat/i.test(navigator.userAgent)) {
  app.config.globalProperties.$isWeChat = true
}
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  app.config.globalProperties.$isSafari = true
}
if (/firefox/i.test(navigator.userAgent)) {
  app.config.globalProperties.$isFirefox = true
}

/* 傻逼safari中要等一下才能拿到准确的视口尺寸。所以刚加载时要做一些骚操作。所以先不显示页面。 */
if (app.config.globalProperties.$isSafari) {
  appNode.style.opacity = '0'
  setTimeout(() => {
    appNode.style.opacity = ''
  }, 3000)
}

// 傻逼safari中往往要等一下才能拿到准确的视口尺寸，但刷新后却可以立刻拿到准确的尺寸。所以判断下视口尺寸是否有变化，有变化就刷新重来。
const shabiSafari = window.innerHeight
setTimeout(() => {
  if (shabiSafari !== window.innerHeight) {
    location.reload()
  }
}, 2500)

function onResize() {
  if ( app.config.globalProperties.$isMobile && window.innerHeight > window.innerWidth ) {
    app.config.globalProperties.$isRotate = true
    appNode.style.width = appNode.parentNode.clientHeight + 'px'
    appNode.style.height = appNode.parentNode.clientWidth + 'px'
    appNode.style.transformOrigin = `${appNode.parentNode.clientWidth / 2}px ${appNode.parentNode.clientWidth / 2}px`
    appNode.style.transform = 'rotate(90deg)'
  } else {
    app.config.globalProperties.$isRotate = false
    appNode.style.width = '100%'
    appNode.style.height = '100%'
    appNode.style.transformOrigin = ``
    appNode.style.transform = ''
  }

  if (app.config.globalProperties.$isRotate) {
    app.config.globalProperties.$oneRemToPx = window.innerWidth * idealRootFontSize / idealWindowInnerHeight
    app.config.globalProperties.$windowSizeX = window.innerHeight
    app.config.globalProperties.$windowSizeY = window.innerWidth
    if (app.config.globalProperties.$isMobile && app.config.globalProperties.$isSafari) {
      appNode.classList.remove('homepage-need-handle')
    }
  } else {
    app.config.globalProperties.$oneRemToPx = window.innerHeight * idealRootFontSize / idealWindowInnerHeight
    app.config.globalProperties.$windowSizeX = window.innerWidth
    app.config.globalProperties.$windowSizeY = window.innerHeight
    if (app.config.globalProperties.$isMobile && app.config.globalProperties.$isSafari) {
      appNode.classList.add('homepage-need-handle')
    }
  }
  document.documentElement.style.fontSize = app.config.globalProperties.$oneRemToPx + 'px'
}

onResize()

window.addEventListener('resize', () => {
  onResize()
})