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.mzph.cn/news/117658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最新校园说明会日程安排-ABeam(德硕)旗下艾宾信息技术开发(上海) 德硕管理咨询(深圳)

艾宾信息技术开发&#xff08;上海&#xff09; 2024校园招聘 招聘岗位 公司介绍 福利待遇 联系我们 行程一览 华东理工大学校园宣讲会 日期&#xff1a;2023年10月23日&#xff08;周一&#xff09; 时间&#xff1a;14:00-16:00 地点&#xff1a;上海市徐汇区梅陇…

思维导图软件 ConceptDraw MINDMAP mac中文特色介绍

ConceptDraw MINDMAP mac是一款思维导图绘制软件&#xff0c;它可以帮助用户快速创建各种类型的思维导图&#xff0c;如组织结构图、流程图、概念图和UML图等。该软件具有直观的界面和简单易用的操作方式&#xff0c;使得用户能够轻松地创建复杂的思维导图。此外&#xff0c;它…

Android Studio新功能-设备镜像Device mirroring-在电脑侧显示手机实时画面并可控制

下载最新的灰测版本-蜥蜴 成功运行到真机后&#xff0c;点击右侧Running Devices选项卡&#xff0c;再点击号 选中当前设备&#xff1b; 非常丝滑同步&#xff0c;在电脑侧也可以顺畅控制真机 该功能大大方便了我们视线保持在显示器上专注开发&#xff0c;并且便于与UI视觉进行…

搜维尔科技:伦敦艺术家利用Varjo头显捕捉盲人隐藏的梦想

在伦敦举行的弗里泽艺术博览会上,与专业级虚拟现实/XR硬件和软件领域的全球领先者Varjo合作,展示一个突破性的混合现实艺术装置, 皇家国家盲人学会 (rnib),英国领先的视力丧失慈善机构。 这个名为"公共交通的私人生活"的装置是一个互动的声音和图像雕塑,旨在让有眼光…

KNN-水仙花的分类

题目&#xff1a; 思路&#xff1a; 1、处理数据集&#xff0c;这里用的是题目已知的数据集&#xff0c;所以说需要提前将写好的数据放到excel表格里&#xff0c;再进行读取。 2、将数据集划分为训练集和测试集 3、定义K-NN模型。 4、训练模型 5、预测模型 6、计算分类精…

通过VScode连接远程 Linux 服务器修改vue代码

1先在Linux环境安装node&#xff0c;官网下载的node安装包放在自己新建文件夹 2解压 tar -zxvf node-v18.18.0-linux-x64.tar.xz 3新建代码路径&#xff0c; 下载代码 4安装 OpenSSH OpenSSH 可以让你在终端使用 ssh 命令&#xff0c;Windows10 一般自带。 可以通过以下方式…

大数据技术学习笔记(二)—— Hadoop 运行环境的搭建

目录 1 准备模版虚拟机hadoop1001.1 修改主机名1.2 修改hosts文件1.3 修改IP地址1.3.1 查看网络IP和网关1.3.2 修改IP地址 1.4 关闭防火墙1.5 创建普通用户1.6 创建所需目录1.7 卸载虚拟机自带的open JDK1.8 重启虚拟机 2 克隆虚拟机3 在hadoop101上安装JDK3.1 传输安装包并解压…

Webpack 基础以及常用插件使用方法

目录 一、前言二、修改打包入/出口配置步骤 三、常用插件使用html-webpack-plugin打包 CSS 代码提取 CSS 代码优化压缩过程打包 less 代码打包图片文件 一、前言 本质上&#xff0c;Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时…

【接口测试】Jmeter接口实战-Dubbo接口+造10W数据测试(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Windows环境通…

深入了解JavaScript中的AJAX和HTTP请求

在现代Web开发中&#xff0c;AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;和HTTP请求被广泛应用于实现动态交互式网页。本文将深入探讨AJAX的概念、工作原理以及使用方法。 什么是AJAX&#xff1f; AJAX是一种利用JavaScript和HTTP请求与服务器进行异步通信的…

66 跳跃游戏

跳跃游戏 题解1 贪心题解2 DP&#xff08;超时, 但思路应该对&#xff09; 给你一个非负整数数组 nums&#xff0c;你最初位于数组的 第一个下标。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 …

c语言进制转换表

c语言进制转换表 c语言进制转换表 c语言进制转换表 END

制造业中的微小缺陷检测——应用场景分析与算法选择(YoloV8/CANet)

一、缺陷检测任务 缺陷检测的任务通常可以分为三个主要阶段&#xff0c;包括缺陷分类、缺陷定位和缺陷分割。 1.缺陷分类 缺陷分类是检测过程的第一步&#xff0c;目的是将检测到的缺陷区域分类为不同的类别&#xff0c;通常是根据缺陷的性质或类型进行分类。分类的类别包括…

中文编程开发语言工具系统化教程初级1上线

中文编程系统化教程初级1 学习编程捷径&#xff1a;&#xff08;不论是正在学习编程的大学生&#xff0c;还是IT人士或者是编程爱好者&#xff0c;在学习编程的过程中用正确的学习方法 可以达到事半功倍的效果。对于初学者&#xff0c;可以通过下面的方法学习编程&#xff0c;…

工控安全与网络安全有什么不同?

在当代&#xff0c;全球制造业正在经历一场前所未有的技术变革。工业4.0不仅代表着自动化和数据交换的进步&#xff0c;它还揭示了工业自动化、智能制造与系统集成的融合。这种集成为企业带来了效率和质量的双重提升&#xff0c;但同时也暴露出新的安全隐患。工控系统成为了这一…

化工园区数字孪生可视化管控平台,赋予园区安全环保智慧发展

化工行业作为国民经济的支柱和工业发展的引擎&#xff0c;对安全生产、环保节能、应急管控有着很高的要求。目前国内外化工园区面临安全和环保两大压力。为有效解决这两大难题&#xff0c;巨蟹数科综合运用物联网、数字孪生等新一代信息技术&#xff0c;建设了数字孪生园区智慧…

研发效能(DevOps)职业技术认证-第六期开班啦丨IDCF

本证书是由国家工业和信息化部教育与考试中心颁发的职业技术证书&#xff0c;也是国内首个《研发效能&#xff08;DevOps&#xff09;工程师职业技术认证》。该《认证》对研发效能&#xff08;DevOps&#xff09;工程师的职业技术分为初级、中级、高级三个专业等级。 IDCF社区…

Qt之普通项目如何生成DLL(含源码+注释)

文章目录 一、示例图二、普通项目需要改造的内容三、源码&#xff08;创建了一个TestDLL的项目&#xff0c;更改内容主要在pro文件和maindow.h文件&#xff09;TestDLL.promainwindow.hmainwindow.cppmainwindow.ui 总结 一、示例图 使用不同的编译模式编译&#xff0c;会在对…

【产品经理】APP备案(阿里云)

工信部《关于开展移动互联网应用程序备案工作的通知》 工业和信息化部印发了《关于开展移动互联网应用程序备案工作的通知》&#xff0c;“在中华人民共和国境内从事互联网信息服务的App主办者&#xff0c;应当依照相关法律法规等规定履行备案手续&#xff0c;未履行备案手续的…

微信小程序——后台交互

目录 后台准备 pom.xml 配置数据源 整合mtbatis 前后端交互 method1 method2 后台准备 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org…