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>
相关推荐
jerrywus4 分钟前
让 AI 写完代码后交一份报告:我改造了 answer-me-with-html
前端·claude·cursor
派小心.41 分钟前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
hhb_6181 小时前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Java后端的Ai之路1 小时前
08_React组件API
前端·react.js·前端框架
小马不起床1 小时前
零基础玩转 FastAPI_09:前端基础工程构建
前端·状态模式·fastapi
jimy11 小时前
c++的 Type Traits (一)
开发语言·c++
Web极客码2 小时前
Python Ollama 本地 Agent 入门与订单查询实践
开发语言·jvm·python
const_qiu2 小时前
第一章 1.1-1.2:基础模型调用与 TypeScript 入门 —— Java 开发者的视角
java·javascript·typescript
风骏时光牛马2 小时前
用户管理模块接口开发
前端
kimnoic3 小时前
PHP 8.2的DNF类型怎么用才规范
开发语言·php