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>
相关推荐
NGC_66118 小时前
JDK1.7 与 JDK1.8 ConcurrentHashMap:从分段锁到桶级锁的进化
java·开发语言
酉鬼女又兒8 小时前
零基础快速入门前端DOM核心知识点详解与蓝桥杯Web赛道备考指南(可用于备赛蓝桥杯Web应用开发)
前端·职场和发展·蓝桥杯
大黄说说8 小时前
PHP 数组 vs SPL 数据结构:队列与栈场景下的性能对决
开发语言·数据结构·php
rookie软工8 小时前
Qt代理委托实现
开发语言·python·qt
daols888 小时前
vue甘特图vxe-gantt实现点击任务条弹出编辑表单
前端·vue.js·甘特图·vxe-gantt
leaves falling8 小时前
C++类和对象(3)(初始化列表,类型转换,static成员,友元)
java·开发语言·c++
宵时待雨8 小时前
C++笔记归纳15:封装map & set
开发语言·数据结构·c++·笔记·算法
zfyljx8 小时前
Taro+react input框在文字中间插入光标会跳到末尾问题
javascript·react.js·taro
Fairy要carry8 小时前
项目05-手搓Agent之任务通信+任务编排的实现
服务器·前端·网络
忘忧记8 小时前
pytest进阶参数化用法
前端·python·pytest