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>
相关推荐
nvvas4 分钟前
Java 入门(四):数组——数据的集合管理
java·开发语言
默_笙5 分钟前
🚋 从流水线到地铁网:为什么复杂 AI 都要拆成多 Agent(上)——LangGraph 基础入门
前端·javascript
科技苑20 分钟前
前后端分离与微服务架构如何协同?
前端·后端·前端框架
神秘的猪头33 分钟前
TypeScript 高级用法全解析:从泛型到 infer,把类型系统真正用起来
前端·typescript
moMo35 分钟前
React Hooks 与闭包
前端·react.js
ID346107442040 分钟前
【课程设计】基于Spring Boot+Vue的游戏账号租赁系统的设计与实现-计算机毕设 附源码50345
javascript·vue.js·spring boot·python·node.js·php·课程设计
柚yuzumi43 分钟前
彻底搞懂 JavaScript 类型转换:显式转换、隐式转换与 ToPrimitive
前端·javascript·node.js
向北丶44 分钟前
vscode 导入语句排序和删除未使用的导入
前端·visual studio code
Y3815326621 小时前
SERP 数据清洗实战:字段标准化、日期解析与去重键
开发语言·数据库·python·python数据库
PHP实战开发录1 小时前
PHP接口偶发变慢怎么查
前端·php·开发