vue3检测是手机还是pc端,监测视图窗口变化

1.超小屏幕(手机) 768px以下

2.小屏设备(平板) 768px-992px

3.中等屏幕(旧式电脑) 992px-1200px

4.大屏设备(现代电脑) 1200px以上

TypeScript 复制代码
<script setup name="welcome">
import { onMounted, ref } from 'vue'

const screenWidth = ref(document.documentElement.clientWidth)
const isPhone = ref(screenWidth.value < 993) // 小于993视为平板及手机

onMounted(() => {
  window.addEventListener('resize', () => {
    screenWidth.value = document.body.offsetWidth
    isPhone.value = document.body.offsetWidth < 993 // 小于993视为平板及手机
})

const nextHandle = () => {
  window.location.href = isPhone.value ? 'https://www.baidu.com/' : 'https://element-plus.gitee.io/zh-CN/component/'
}
</script>
相关推荐
m0_敲代码的彭于晏1682 小时前
Vercel 前端部署平台深度评测
前端
懂点Tech3 小时前
ctfshow MISC入门图片篇(信息附加):misc41解题思路
开发语言·python
怕浪猫3 小时前
外包和大厂的前端代码,差在凌晨三点
前端·面试·github
m0_敲代码的彭于晏1684 小时前
Vercel 前端部署与全栈开发实战指南
前端·状态模式
徐小夕4 小时前
花了3个月,我们做了一款 AI 版的“飞书文档”
前端·算法·github
贾伟康4 小时前
【化学实验室|17】HarmonyOS ArkTS 亮暗色与视觉令牌实战:集中颜色、间距和交互状态避免页面割裂
前端·移动开发·harmonyos·arkts·arkui
catchadmin4 小时前
PHP 8.7 协程新提案 让跨协程代码共享请求身份
开发语言·php
念何架构之路5 小时前
go-grpc设计思想
开发语言·后端·golang
Csvn5 小时前
SSR/SSG/ISR(上):峡谷与渲染策略的时间预算
前端
Csvn5 小时前
SSR/SSG/ISR(下):可交互性、新鲜度与回源账
前端