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>
相关推荐
高冷小鱼殿下1 分钟前
内部类Lambda与枚举
java·开发语言
栉甜11 分钟前
Vue2学习内容(上)
前端·javascript·vue.js·学习
shelly聊外贸17 分钟前
WhatsApp 聊天记录如何导出为 CSV?使用 Python 进行数据分析
开发语言·python·数据分析
梦曦i20 分钟前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app x
布丁爱干饭21 分钟前
寄给午后
前端
Captain1314_李祖团38 分钟前
章节3:MLIR完成一个端到端的流程
mlir·1024程序员节
java1234_小锋1 小时前
【技术专题】CSS3 网页技术 - CSS3 布局进阶
前端·css·css3
octopus_c1 小时前
C++ 模板详解:函数模板、类模板、特化与分离编译
开发语言·c++·算法
zhippt_10141 小时前
只剩截图没有源文件?图转PPT把图片还原成可编辑幻灯片
前端·人工智能·powerpoint
Solange__2 小时前
在线3D预览器、Blender和游戏引擎怎么选?按5类任务比较格式、隐私与编辑性
人工智能·游戏·3d·游戏引擎·blender·1024程序员节·关卡设计