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>
相关推荐
LuHang4 分钟前
我一行代码没写,把领导派的活做成了公司内部系统😭
前端
明月_清风11 分钟前
Meta 开源了一个 AI Native 组件库:Astryx,150+ React 组件,专为 AI Agent 而设计
前端·人工智能·ai编程
用户8508692761532 分钟前
秒杀系统中 Shell 脚本并发控制 Bug:究竟哪里出了
前端
qq_406981032 小时前
c++拷贝构造函数
开发语言·c++
程序员大阳2 小时前
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口
javascript·css·html·实战·删除·查询·新增
爱喝雪碧的可乐2 小时前
MATLAB
开发语言·算法·matlab
炫酷的大高个3 小时前
6 亿播放的闪身步,我用前端算出 15 倍重心差
前端·javascript
不可能片场3 小时前
内容运营自动化 配图折行别把词切两半
前端·electron
Lank_M3 小时前
HEIC转JPG统一转sRGB,P3高饱和色就回不来了
前端
补码缩写3 小时前
sharp默认转JPG颜色没错,ICC和EXIF却全没了
前端