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 分钟前
[Java学习日记10】聊聊checked exception和runtime exception
java·开发语言·学习
mCell2 分钟前
别急着骂运营商,你家路由器里可能藏着一台 PCDN 盒子
前端·http·cdn
PILIPALAPENG3 分钟前
Skills篇-findskills:告别手动迁移Skill!跨AI工具通用能力,才是真高效
前端·人工智能·后端
假如让我当三天老蒯5 分钟前
Composables和Utils的区别(自学用)
前端
不会C语言的男孩6 分钟前
C++ Primer 第6章:函数
开发语言·c++
kungggyoyoyo7 分钟前
从0开发一套geo优化软件:系统定位与整体架构
前端
用户713874229009 分钟前
PKCE 的 S256 算法深度剖析:从协议设计到密码学原理
前端
闪闪发光得欧9 分钟前
StreamTokenizer的源码分析和使用方法详细分析
前端
dnbug Blog10 分钟前
C语言 简介
c语言·开发语言
李剑一10 分钟前
华为一面就问网络安全?面试官:请简述一下 XSS/CSRF 的攻击面与前端侧的防护
前端·面试