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>
相关推荐
老王爱玩车1 分钟前
文件操作从打开到缓冲区
c语言·开发语言·学习
EatFan4 分钟前
React 项目踩坑实录:useEffect 闭包陷阱、Context 性能陷阱与 React 18 升级避坑排查手册
前端·javascript·react.js·react·react hooks·useeffect·闭包陷阱
SunnyDays101118 分钟前
Java 合并 PDF 文件:完整合并、指定页面合并与流合并
java·开发语言·合并pdf
风骏时光牛马38 分钟前
企业业务运营信息数据库
前端
kimnoic1 小时前
Python操作xlwings的实例详解
开发语言·python
IT_陈寒1 小时前
Vue的数组更新把我坑惨了
前端·人工智能·后端
栗子~~1 小时前
java - logstash-logback-encoder 集成 demo
java·开发语言·logback
于航1 小时前
分层上下文压缩,幻觉检测,错误累积概要
前端
数据掘金1 小时前
鸿蒙统计的权限弹窗怎么适配?
前端
数据掘金2 小时前
鸿蒙统计的多设备协同数据怎么打通?
前端