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>
相关推荐
见叶之秋18 分钟前
C++ 泛型世界的两块拼图:容器适配器与仿函数
java·开发语言
程序员老赵30 分钟前
Docker 部署 Dolibarr:轻松搭建开源 ERP/CRM 平台
运维·前端·后端
星禾元亨34 分钟前
同一件事有三份资料,AI 该信哪一份?冲突判定、优先级链与处置流程
前端·人工智能
逗脑IDE38 分钟前
零基础学ESP32:RFID无线射频卡——让ESP32拥有“刷卡“能力!
开发语言·网络·人工智能·python·esp32·硬件开发
Dovis(誓平步青云)41 分钟前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
小师兄吃牛肉42 分钟前
C语言篇:内联函数
c语言·开发语言
穆梓兰煊43 分钟前
TS5.7 vs 裸JS:AI应用少3坑
前端
榆瓷1 小时前
闲着没事,我把 WebGPU 的样板代码封成了一个库
前端
136096757231 小时前
页面打不开不是 Nginx 的错
前端·后端
yuniko-n1 小时前
【Java】字符串相关坑点
java·开发语言·python