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>
相关文章:
vue3检测是手机还是pc端,监测视图窗口变化
1.超小屏幕(手机) 768px以下 2.小屏设备(平板) 768px-992px 3.中等屏幕(旧式电脑) 992px-1200px 4.大屏设备(现代电脑) 1200px以上 <script setup name"welcome"> i…...
B - Magical Subsequence (CCPC2021哈尔滨)
思路: (1)问题:对于已知数组,每组依次选两个,尽量选更多组,选的每组和相等;(假定和为x) (2)于是问题拆分为两步, x是多少x确定时&a…...
Leetcode刷题详解——x的平方根
1. 题目链接:69. x 的平方根 2. 题目描述: 给你一个非负整数 x ,计算并返回 x 的 算术平方根 。 由于返回类型是整数,结果只保留 整数部分 ,小数部分将被 舍去 。 **注意:**不允许使用任何内置指数函数和…...
windows安装docker,解决require wsl 2问题
想在windows上安装桌面版docker,上官网下载了安装包,安装完后,启动报错,忘了截图了。 大概意思就是require wsl 2。 于是就是docker FAQ中找相关问题解决方案,点,点,点然后就点到微软了。 ws…...
建立复数类
目录 程序设计 程序分析 系列文章 在课堂示例的基础上,显示复数时如果虚部为0时只显示实部,实部为0时只显示虚部,虚部为负数时以a-bi的形式显示,并为复数类增加减法功能。 程序设计 Work4类: package work;import java.util.Scanner;public class Work4 {private in…...
docker部署prometheus+grafana服务器监控(三) - 配置grafana
查看 prometheus 访问 http://ip:9090/targets,效果如下,上面我们通过 node_exporter 收集的节点状态是 up 状态。 配置 Grafana 访问 http://ip:3000,登录 Grafana,默认的账号密码是 admin:admin,首次登录需要修改…...
面试题:说一下加密后的数据如何进行模糊查询?
文章目录 正文如何对加密后的数据进行模糊查询沙雕做法沙雕一沙雕二 常规做法常规一常规二超神做法 总结 正文 我们知道加密后的数据对模糊查询不是很友好,本篇就针对加密数据模糊查询这个问题来展开讲一讲实现的思路,希望对大家有所启发。 为了数据安…...
LeetCode75——Day15
文章目录 一、题目二、题解 一、题目 1456. Maximum Number of Vowels in a Substring of Given Length Given a string s and an integer k, return the maximum number of vowel letters in any substring of s with length k. Vowel letters in English are ‘a’, ‘e’…...
Qwt开发环境搭建(保姆级教程)
1.简介 QWT,即Qt Widgets for Technical Applications,其目标是以基于2D方式的窗体部件来显示数据, 数据源以数值,数组或一组浮点数等方式提供, 输出方式可以是Curves(曲线),Slider…...
【供应链】仓储、物流、车辆管理
...
从另外一个进程中读取数据
从另外一个进程中读取数据,其实就注入线程,寻址,解析内存,处理数据。例如这个就是从另外一个正在运行的进程中,读取数据并保存。实时性还可以。...
【FPGA零基础学习之旅#17】搭建串口收发与储存双口RAM系统
🎉欢迎来到FPGA专栏~搭建串口收发与储存双口RAM系统 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒🍹 ✨博客主页:小夏与酒的博客 🎈该系列文章专栏:FPGA学习之旅 文章作者技术和水平有限,如果文中出现错误࿰…...
建立Line类
目录 程序设计 程序分析 系列文章 计算机上的线实际上是线段,要求包含两个端点;颜色为彩虹色;线的粗细是类变量,至少包含show方法。 程序设计 Work5类: package work;import java.util.Scanner;public class Work5 { public static void main(String[] args) {// …...
10_集成学习方法:随机森林、Boosting
文章目录 1 集成学习(Ensemble Learning)1.1 集成学习1.2 Why need Ensemble Learning?1.3 Bagging方法 2 随机森林(Random Forest)2.1 随机森林的优点2.2 随机森林算法案例2.3 随机森林的思考(--->提升学习) 3 随机森林(RF&a…...
工业通信网关常用的工业通信协议
在工业领域中常常有不同的设备协同工作,而这些设备的通信协议和数据格式也有所差异,要想实现不同通信设备之间的数据传输互通,工业网关是一个重要的设备。 什么是工业网关 工业网关是一种能够连接多种不同设备并实现数据的收集、传输、处理和…...
如何将音频与视频分离
您一定经历过这样的情况:当你非常喜欢视频中的背景音乐时,希望将音频从视频中分离出来,以便你可以在音乐播放器中收听音乐。有没有一种有效的方法可以帮助您快速从视频中提取音频呢?当然是有的啦,在下面的文章中&#…...
【antd】form表单为空校验失效 form.item.rules传入非所需的api属性时,引起为空自动验证失效问题
现象 form表单的rules设置后,在form表单项为空时,不提醒required(正常现象),当开始输入后,马上触发了required为空校验,但此时表担心Input明明是有值的。 问题背景: form.item.ru…...
数据可视化的常见工具
Tableau: Tableau是一种流行的商业数据可视化工具,可以连接各种数据源,创建交互式仪表板和报告。它提供了强大的图表和图形功能。 Power BI: Power BI是微软的数据分析和可视化工具,与Microsoft生态系统紧密集成。它支持从多个数据源创建可视…...
不希望你的数据在云中?关闭iPhone或Mac上的iCloud
如果你不想使用iCloud,可以很容易地从设备设置中选择退出并关闭它。当你禁用iCloud时,它会删除该设备对iCloud的访问,但不会删除苹果服务器上的任何数据。我们将在本文末尾向你展示如何做到这一点。 注销iCloud并完全禁用它 如果你根本不…...
10 个最佳免费 PDF 压缩工具软件
PDF 是一种全球流行的文件格式,可在不损失质量或文本对齐的情况下传输文档。问题是许多文件共享应用程序和网站限制您可以共享或上传的 PDF 的大小。 10 个最佳免费 PDF 压缩工具软件 在这种情况下,您将需要一个可以为您减小 PDF 文件大小的应用程序。P…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...
