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>
相关推荐
萌动的小火苗30 分钟前
1、python基础面试题
java·开发语言·python
运维行者_40 分钟前
网络监控与ITSM集成:从告警到工单,实现运维自动化闭环
开发语言·网络·分布式·后端·架构·flask·php
踩着两条虫43 分钟前
VTJ.PRO AI Agent 技术白皮书
前端·vue.js·低代码
子兮曰44 分钟前
解剖 Claude Code:从入口架构逆向工程看 AI 编程工具的信任边界设计
前端·后端·claude
先吃饱再说1 小时前
层层传递太“痛”了:useContext 给 React 组件装了个“无线遥控器”
前端·react.js·前端框架
颜进强1 小时前
前端看后端 15:什么是 DNS?
前端·后端·ai编程
文艺理科生1 小时前
LangChain.js-v1-记忆管理最佳实践
前端·javascript·后端
小叮当爱咖啡1 小时前
Day3.参数+Prompt三板斧
开发语言·python·prompt
子兮曰1 小时前
Elysia vs Hono 完整性能对比:Bun 专属优化还是跨平台通用,2026 实测数据给出的答案
前端·后端·typescript
菜冻鱼1 小时前
Python-pandas-索引与筛选
开发语言·笔记·python·numpy·pandas·学习方法