前端适配笔记本缩放125%,150%导致页面错乱问题

由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。
如果页面比较简单就让多余的空白单边扩展,这样可以不受影响,但是如果页面遍布了引入的其他组件,就不好控制位置和大小了。
我去搜了一下,基本都是根据 window.screen.availHeight 来获取屏幕缩放比例,
window.screen.availHeight > 1000 说明缩放选择的是100%,否则是125%、150%.

在APP.vue中:

 created() {

    this.$nextTick(() => {

      this.resizeFun();

      window.addEventListener("resize", this.resizeFun);

    });

  },

  methods: {

    resizeFun() {

      const devicePixelRatio = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25    150% -> 1.5

      console.log(devicePixelRatio, "devicePixelRatio");

      if (devicePixelRatio !== 1) {

        // 如果在笔记本中用IE浏览器打开 则弹出提示

        if (!!window.ActiveXObject || "ActiveXObject" in window) {

          alert("balabala。。。");

        } else {

          const c = document.querySelector("body");

          c.style.zoom = 1 / devicePixelRatio; // 修改页面的缩放比例

        }

      }

    }

  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/91385.shtml

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

相关文章

iOS Swift 拍照识别数字(Recognizing Text in Images)

1.苹果官方的解决方案(推荐) Recognizing Text in Images - apple developer Extracting phone numbers from text in images(Sample Code) - apple developer 1.1 demo下载(亲测有效) :recognizeTextInImage - gitee 1.2 测试成功的代码 …

碎片笔记|AIGC核心技术综述

前言:AIGC全称为AI-Generated Content,直译为人工智能内容生成。即采用人工智能技术来自动生产内容。AIGC在2022年的爆发,主要是得益于深度学习模型方面的技术创新。不断涌现的生成算法、预训练模型以及多模态等技术的融合引发了AIGC的技术变…

MySQL数据库与表管理《三国志》为例

在数据库管理中,一个典型的应用场景是游戏数据的存储和管理。以经典游戏《三国志》为例,该游戏具有多个角色、任务、装备等元素,如何有效地存储和管理这些数据就成为了一个问题。 本文将通过《三国志》的实例,详细解释如何在MySQL中进行数据库和表的管理。 文章目录 《三国…

深度剖析Linux磁盘分区 | LVM逻辑卷 | VDO卷 | AutoFS存储自动挂载

深度剖析Linux磁盘分区 | LVM逻辑卷 | VDO卷 | AutoFS存储自动挂载 前言说明1. 安装操作系统分区配置2. 大磁盘分区管理3. LVM逻辑卷管理3.1. 创建LVM逻辑卷3.1.1. 创建物理卷PV3.1.2. 创建卷组VG3.1.3. 创建逻辑卷LV3.1.4. 创建并挂载文件系统3.1.5. 配置开机自动挂载 3.2. 逻…

华为云云耀云服务器L实例评测|华为云上安装etcd

文章目录 华为云云耀云服务器L实例评测|华为云上安装etcd一、什么是etcd官方硬件建议 二、华为云主机准备三、etcd安装1. 安装预构建的二进制文件2. 从源代码构建 四、etcd服务注册与发现1. 配置etcd2. 使用systemctl 管理启动etcd服务3. 注册服务4. 发现服务 五、其…

面试题:说一下SpringBoot的自动配置原理

文章目录 引言工作原理剖析EnableAutoConfiguration自动配置生效总结 引言 不论在工作中,亦或是求职面试,Spring Boot已经成为我们必知必会的技能项。除了某些老旧的政府项目或金融项目持有观望态度外,如今的各行各业都在飞速的拥抱这个已经…

C# 获取磁盘空间大小的方法

方法一:利用System.IO.DriveInfo.GetDrives方法来获取 /// 获取指定驱动器的空间总大小(单位为B)////// 只需输入代表驱动器的字母即可 (大写)///public static long GetHardDiskSpace(string str_HardDiskName){long totalSize new long();…

【PHP】如何关闭buffer实时输出内容到前端

前言 默认情况下,我们在PHP里使用echo等函数输出的内容,是不会马上发送给前端的,原因是有 buffer 的存在,buffer又分两处,一处是PHP本身的buffer,另一处是Nginx的buffer。只有当buffer满了之后&#xff0c…

if条件分支计算分段函数

分别罗列x的值域区间,if条件跳转相应分支计算函数值。 (本笔记适合正在研学if条件分支语句的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网:https://www.python.org/ Free:大咖免费“圣经”教程《 python 完全自学教程》&#xff0c…

【MySQL进阶】--- 存储引擎的介绍

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】🎈 本专栏旨在分享学习MySQL的一点学习心得,欢迎大家在评论区讨论💌 目录 一、什么…

ALOS2 PALSAR2 数据ID命名规则

场景ID AAAAABBBBBCCCC-YYMMDD AAAAA:卫星类别“ALOS2” BBBBB:以场景为中心的总计循环号码 CCCC:场景中心的帧编号 -: 分隔号 YYMMDD:场景中心的观测年月日 (YY:末两位年,MM:月,DD:日) 产品ID DDDEFFFGHI DDD:观测模式 SBS:聚光灯模式 UBS:高分辨…

HMTL知识点系列(3)

目录 1. 如何在HTML中嵌入视频和音频?2. 解释一下HTML的“盒模型”是什么,以及它如何影响布局?3. 你如何理解HTML的语义化标签和SEO优化之间的关系?4. 什么是HTML5的canvas元素,你如何使用它来创建图形?5. …

【k8s】【docker】web项目的部署

yaml配置文件 后端:springboot项目 前端:vue项目,之前镜像封装的nginx.conf反向代理配置直接使用了docker-compose.yml中services的名称,无法代理成功,可修改为127.0.0.1 # 后端 apiVersion: apps/v1 kind: Deployment…

Object.defineProperty()方法详解,了解vue2的数据代理

假期第一篇,对于基础的知识点,我感觉自己还是很薄弱的。 趁着假期,再去复习一遍 Object.defineProperty(),对于这个方法,更多的还是停留在面试的时候,面试官问你vue2和vue3区别的时候,不免要提一提这个方法…

(2023,ControlNet,CFGRW,diffusion,控制组合)向文本到图像扩散模型添加条件控制

Adding Conditional Control to Text-to-Image Diffusion Models 公众号:EDPJ(添加 VX:CV_EDPJ 或直接进 Q 交流群:922230617 获取资料) 目录 0. 摘要 1. 简介 2.相关工作 2.1. 微调神经网络 2.2. 图像扩散 …

git是什么,git常用命令

Git是一种分布式版本控制系统,最初由Linus Torvalds创作并用于管理Linux内核代码。 常见的一些Git命令包括: git init:初始化一个新的Git仓库;git add:将文件添加到Git仓库中;git commit:将更…

FFmpeg 命令:从入门到精通 | ffmpeg 命令分类查询

FFmpeg 命令:从入门到精通 | ffmpeg 命令分类查询 FFmpeg 命令:从入门到精通 | ffmpeg 命令分类查询ffmpeg -versionffmpeg -buildconfffmpeg -formatsffmpeg -muxersffmpeg -demuxersffmpeg -codecsffmpeg -decodersffmpeg -encodersffmpeg -bsfsffmpeg…

基于SSM+Vue的医院住院综合服务管理系统的设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用Vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

Axios有哪些常用的方法?

Axios是一个常用的JavaScript库,用于进行HTTP请求。它提供了一组简洁而强大的方法来发送各种类型的请求,并处理响应数据。以下是Axios中一些常用的方法及其格式: GET请求: axios.get(url[, config]).then(response > {// 请求…

三、2023.9.29.C++面向对象.3

文章目录 33、简述一下什么是面向对象?34、简述一下面向对象的三大特征?35、简述一下 C 的重载和重写,以及它们的区别?36、说说 C 的重载和重写是如何实现的?37、说说构造函数有几种,分别什么作用?38、只定…