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>
相关推荐
xiyueyezibile1 分钟前
“自迭代” Skill 的 team-pitfalls 的演进
前端·后端·ai编程
gugucoding5 分钟前
25. 【C语言】二进制文件与随机读写
c语言·开发语言
北极星日淘6 分钟前
中古货品品相评级算法实战|Java权重计分实现标准化五级品相体系
开发语言·python
林恒smileZAZ12 分钟前
`Array(100).map(() => 1)` 为什么全为空?
前端·javascript
小巧的砖头34 分钟前
C#会重蹈覆辙吗?系列之2:反射及元数据的性能问题
开发语言·前端·c#
凯瑟琳.奥古斯特36 分钟前
力扣1009补码解法C++实现
开发语言·c++·算法·leetcode·职场和发展
KaMeidebaby40 分钟前
卡梅德生物技术快报|蛋白的叠氮基修饰:实操解析:核酸模板耦合蛋白的叠氮基修饰实现靶蛋白定点共价标记
前端·人工智能·物联网·算法·百度
2601_9636459241 分钟前
【2026最新】MATLAB教程(附安装包,非常详细)
开发语言·matlab·信息可视化
濮水大叔1 小时前
在大型 Vue 项目中,如何有效管理复杂的状态?“散装版” vs “套装版”
前端·vue.js·typescript
玄星啊1 小时前
可修改:代码的生存底线
前端·ai编程