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>
相关推荐
CCYe、10 小时前
限流与配额:企业AI网关的工程实践
前端·人工智能
看谷秀10 小时前
arkts- 6 手势/沉浸式/深浅色/性能/组件补充/访问/js交互/通知/Native交互
前端·arkts
划船不慎掉水顺便摸鱼10 小时前
TipTap 不是编辑器,是编辑器构造器:ProseMirror 模型驱动的富文本架构
前端
小高00710 小时前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
鹿角片ljp10 小时前
Java框架篇:Spring + SpringMVC + SpringBoot + MyBatis深度复习
java·开发语言
凉茶社10 小时前
shadcn/ui 默认改用 Base UI,Radix 被放弃了吗?
前端
Vuji10 小时前
ReAct 与 Plan-Execute:两种 Agent 范式的实战对比
前端·agent
用户615958680002210 小时前
从零原生搭建一个微前端简易框架
前端
小月土星10 小时前
React + TypeScript 企业级开发实战:从类型约束到组件设计
前端
沙洲11 小时前
Vite 环境变量终极指南:从原理到企业级实战
前端