PC端配套移动端（二）

PC 端配套移动端（二）

第二套方案是最快捷的，不需要写两套页面，而是通过缩放，根据比例显示大小，这种只适合游戏网页等年轻人查看的网页。如果是中年往上的用户，建议使用第一套，中年用户眼睛逐渐远视眼。这种对于用户体检不好

App.vue
<template>
  <router-view />
</template>
<script setup>
import { nextTick, onMounted, onUnmounted, reactive } from 'vue'

const deviceInfo = reactive({
  isMobile: false,
  isPC: false,
})

onMounted(async () => {
  await nextTick() // 确保DOM已经渲染完成
  window.addEventListener('resize', handleResize)

  const width = window.innerWidth

  // 假设小于 768px 为移动设备
  deviceInfo.isMobile = width < 768
  deviceInfo.isPC = !deviceInfo.isMobile

  console.log(deviceInfo.isMobile, width, deviceInfo.isPC)

  handleResize()
})

// 在组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  const width = window.innerWidth

  // 假设小于 768px 为移动设备
  deviceInfo.isMobile = width < 768
  deviceInfo.isPC = !deviceInfo.isMobile

  console.log(deviceInfo.isMobile, width, deviceInfo.isPC)

  if (!deviceInfo.isPC) {
    const height = window.innerHeight
    const standardWidth = 768
    const standardHeight = window.innerHeight

    if (width < standardWidth || height < standardHeight) {
      const scaleX = width / standardWidth
      const scaleY = height / standardHeight
      const scale = Math.min(scaleX, scaleY)
      document.body.style.transform = `scale(${scale})`
      document.body.style.transformOrigin = 'left top'
      document.body.style.width = `${standardWidth}px`
      document.body.style.height = `${standardHeight}px`
    } else {
      document.body.style.transform = 'none'
      document.body.style.width = '100%'
      document.body.style.height = '100%'
      document.body.style.overflow = 'auto'
    }
  }
}
</script>
<style>
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent !important;
  /* 滚动条轨道背景 */
}

::-webkit-scrollbar-thumb {
  background-color: #edeef2 !important;
  /* 滚动条颜色 */
  border-radius: 4px !important;
  /* 滚动条圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #6b6d6f !important;
  /* 悬停时颜色 */
}
body {
  margin: 0 !important;
}
</style>

// index.html
<meta name="viewport" content="width=device-width, initial-scale=0.1, maximum-scale=3.0, user-scalable=yes">

解释：
width=device-width：设置页面宽度为设备的屏幕宽度，适应不同屏幕尺寸。
initial-scale=0.1：页面初始缩放比例设为 10%，页面加载时非常小。
maximum-scale=3.0：用户最大可缩放页面的比例为 3 倍。
user-scalable=yes：允许用户缩放页面（通过手势）。