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>
相关推荐
颜酱几秒前
理解并查集Union-Find:从原理到练习
javascript·后端·算法
前端小菜鸟也有人起几秒前
Vue2父子组件通信方法总结
javascript·vue.js·ecmascript
陆枫Larry1 分钟前
Art Direction(艺术导向适配)
前端
Lee川2 分钟前
从“手工砌砖”到“魔法蓝图”:响应式驱动界面的诞生与实战
前端·vue.js
与虾牵手3 分钟前
Next.js 14 App Router 踩坑实录:5 个让我加班到凌晨的坑 🕳️
前端·javascript·面试
猩球中的木子3 分钟前
怎么集成安装VitePlus(Vite+)并使用
前端·vite·前端工程化
OxyTheCrack5 分钟前
简述各语言GC(垃圾回收)机制
开发语言
李昊哲小课7 分钟前
电商系统项目教程
开发语言·前端·javascript
smxgn27 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
AI科技星31 分钟前
基于双隐含量(角速度 +质量 )的全量变形公式体系-发现新公式
开发语言·人工智能·线性代数·算法·矩阵·数据挖掘