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>
相关推荐
小满zs18 小时前
Next.js精通SEO第四章(JSON-LD + web vitals)
前端·seo·next.js
MATLAB代码顾问1 天前
5大智能算法优化标准测试函数对比(Python实现)
开发语言·python
云水一下1 天前
从零开始!VMware安装Fedora Workstation 44桌面系统完整教程
前端
万粉变现经纪人1 天前
如何解决 pip install llama-cpp-python 报错 未安装 CMake/Ninja 或 CPU 不支持 AVX 问题
开发语言·python·开源·aigc·pip·ai写作·llama
小码哥_常1 天前
安卓黑科技:实现多平台商品详情页一键跳转APP
前端
清风明月一壶酒1 天前
OpenClaw自动处理Word文档全流程
开发语言·c#·word
killerbasd1 天前
还是迷茫 5.3
前端·react.js·前端框架
其实防守也摸鱼1 天前
CTF密码学综合教学指南--第五章
开发语言·网络·笔记·python·安全·网络安全·密码学
不会敲代码11 天前
TCP/IP 与前端性能:从数据包到首次渲染的底层逻辑
前端·tcp/ip
kyriewen1 天前
奥特曼借GPT-5.5干杯,而你的Copilot正按Token收钱
前端·github·openai