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>
相关推荐
kyriewen8 小时前
今年裁了16万技术人——但字节前端岗反而涨了23%
前端·javascript·面试
用户059540174468 小时前
把 AI Agent 记忆存储验证从 40 分钟手测压到 3 分钟,pytest + Docker 这套组合太顶了
前端·css
stereohomology9 小时前
MS Edge很多事的一点是把地址栏复制的地址自动转标题文本
前端·edge
leoZ2319 小时前
AI 辅助开发的五道坎
开发语言·人工智能·视觉检测·bert·php·超分辨率重建·openvino
imaol19 小时前
链表 -- 环链表
java·前端·链表
程序员老陆9 小时前
Qt的QThread::usleep和FFmpeg的libavutil模块的av_usleep哪个精度高一些?
开发语言·qt·ffmpeg·音视频
imaol19 小时前
链表 -- 双向链表
java·前端·链表
东风破_9 小时前
大前端手里的 Next.js:从 #root 到 SEO,一份 HTML 的两种命运
前端·后端
IT_陈寒10 小时前
Vue的v-for不听话?我被这个Key的坑整懵了
前端·人工智能·后端
2601_9638699510 小时前
【计算机毕业设计】基于Java的相框定制系统的设计与实现
java·开发语言·课程设计