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>
相关推荐
计算机魔术师17 小时前
AI 写了一半代码,谁来背锅?Anthropic 的安全重构笔记
前端
半个落月17 小时前
JavaScript 单例模式详解:从唯一实例到按钮事件
javascript
明月_清风18 小时前
vLLM 深度实战:2026 年生产级 LLM 推理引擎完全指南
前端·后端·ai编程
风月说与山鬼18 小时前
七、uni-app页面与组件生命周期
前端·uni-app
绿岛之北18 小时前
Electron 安全第三章:URL 加载与 WebView
前端·electron
sunoo-22918 小时前
C 语言文件 IO 全攻略:从基础函数到实战踩坑(BMP 读取 + 词典查询)
linux·c语言·前端·笔记·vscode·学习
Shinner欣儿18 小时前
React18 并发渲染小记
前端
longxiaozhang618 小时前
C#继承:让代码少写一点,偷懒的好方法
开发语言·c#
用户9210802628618 小时前
AI 对话里的消息时间线分页:上滑加载更多历史记忆的实现与坑点
前端
PedroQue9918 小时前
Vue-Router 2.4.0 新增可控重定向功能
前端·uni-app