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>
相关推荐
如此这般英俊5 分钟前
手搓Claude Code-第十三章 background_tasks
前端·人工智能·chrome·python·算法·语言模型·自然语言处理
人间凡尔赛8 分钟前
Angular 20 告别 Zone.js:Zoneless 无 Zone 时代正式开启,Signals 驱动的响应式新范式(附完整代码)
前端·angular
君顾18 分钟前
智慧场馆解决方案小程序系统开发实战指南
java·开发语言·智慧场馆
雪芽蓝域zzs11 分钟前
(五)Vue3 管理后台:权限控制原理 + 完整流程梳理
前端
meilindehuzi_a12 分钟前
React JWT 登录鉴权实战:从无状态 HTTP 到路由守卫、Zustand 与 Axios 拦截器
前端·react.js·http
爱酱丶22 分钟前
VS Code 快速生成Vue3 + TypeScript + Setup 基础空模板
前端·javascript·typescript
Maxkim25 分钟前
在 GitHub 仓库里配一个 AI Code Reviewer,自动审查 PR
前端·javascript
忆江南25 分钟前
Flutter 图片库与 Dio 库优化实战指南
前端
用户9210802628626 分钟前
AI 对话为什么需要 Markdown 解析器:从纯文本气泡到专业内容渲染
前端
运维行者_29 分钟前
预测性云监控怎么做?AI驱动的7大核心能力与落地路径
服务器·开发语言·网络·数据库·人工智能·python·php