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>
相关推荐
Rabbit_QL5 小时前
【水印添加工具】从零设计一个工程级 Python 图片水印工具:WaterMask 架构与实现
开发语言·python
天“码”行空6 小时前
简化Lambda——方法引用
java·开发语言
提笔了无痕6 小时前
Web中Token验证如何实现(go语言)
前端·go·json·restful
z20348315206 小时前
C++对象布局
开发语言·c++
戌中横6 小时前
JavaScript——Web APIs DOM
前端·javascript·html
Beginner x_u6 小时前
如何解释JavaScript 中 this 的值?
开发语言·前端·javascript·this 指针
java1234_小锋7 小时前
Java线程之间是如何通信的?
java·开发语言
张张努力变强7 小时前
C++ Date日期类的设计与实现全解析
java·开发语言·c++·算法
HWL56797 小时前
获取网页首屏加载时间
前端·javascript·vue.js
烟锁池塘柳07 小时前
【已解决】Google Chrome 浏览器报错 STATUS_ACCESS_VIOLATION 的解决方案
前端·chrome