当前位置: 首页 > news >正文

vue3检测是手机还是pc端,监测视图窗口变化

 1.超小屏幕(手机) 768px以下
2.小屏设备(平板) 768px-992px
3.中等屏幕(旧式电脑) 992px-1200px
4.大屏设备(现代电脑) 1200px以上

<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.offsetWidthisPhone.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>

http://www.lryc.cn/news/205205.html

相关文章:

  • B - Magical Subsequence (CCPC2021哈尔滨)
  • Leetcode刷题详解——x的平方根
  • windows安装docker,解决require wsl 2问题
  • 建立复数类
  • docker部署prometheus+grafana服务器监控(三) - 配置grafana
  • 面试题:说一下加密后的数据如何进行模糊查询?
  • LeetCode75——Day15
  • Qwt开发环境搭建(保姆级教程)
  • 【供应链】仓储、物流、车辆管理
  • 从另外一个进程中读取数据
  • 【FPGA零基础学习之旅#17】搭建串口收发与储存双口RAM系统
  • 建立Line类
  • 10_集成学习方法:随机森林、Boosting
  • 工业通信网关常用的工业通信协议
  • 如何将音频与视频分离
  • 【antd】form表单为空校验失效 form.item.rules传入非所需的api属性时,引起为空自动验证失效问题
  • 数据可视化的常见工具
  • 不希望你的数据在云中?关闭iPhone或Mac上的iCloud
  • 10 个最佳免费 PDF 压缩工具软件
  • LVS+keepalived高可用集群
  • 虚拟化 vs. 裸金属:K8s 部署环境架构与特性对比
  • C语言程序设计——题目:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?
  • Python中使用cv2.resize()函数批量自定义缩放图像尺寸
  • 驱动开发5 阻塞IO实例、IO多路复用
  • ElasticSearch:实现高效数据搜索与分析的利器!项目中如何应用落地,让我带你实操指南。
  • 2023了,是时候使用pnpm了!
  • asp.net文档管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
  • Parallels Client for Mac:改变您远程控制体验的革命性软件
  • Julia数组详解
  • 用事务代码查看视图的函数