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>
相关推荐
拖孩6 分钟前
这个小程序是 AI 帮我写的,可它里面一个 AI 功能都没有
前端·后端·微信小程序
Tairitsu_H17 分钟前
[C++] 拷贝构造还是赋值重载?类默认成员函数细节详解
开发语言·c++·类和对象
goodlook012330 分钟前
opencode调用本地模型一(1.18.30版本安装)
开发语言
菜鸟~noob2331 小时前
【电子战】第14篇:TOA 定位——圆交汇与到达时间【含matlab代码】
开发语言·matlab
Nayana1 小时前
《Web 到 HarmonyOS》-- 业务分析:消息推送业务方法
前端
GreenTea1 小时前
发布 3 天登顶 HN:不生成一个字的模型 Jev,我把它的源码和黑料都扒了一遍
前端·后端·算法
前端小崔1 小时前
Three.js 与 Cesium 融合实战问题汇总
前端·three.js·cesium
itmigrate1 小时前
Redis 开发高频隐形踩坑记录
开发语言·java-ee
白远山2 小时前
本地游戏代练源码开发实战:架构设计与核心功能实现指南
java·开发语言·架构·需求分析
wizardpisces2 小时前
Claude Code 是 Angular,Codex 是 Vue,DeepSeek 想当 React
前端·人工智能