解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题

近期在工作中遇到一个问题,记录一下,在项目上线之后,遇到一个问题,即缩放到90%时,页面字体比默认的100%字体大,一开始毫无头绪,经过一番的Google...Google...Google....,终于找到了解决方法,这是因为大多数笔记本电脑默认的缩放比例为125%或者是150%,所以就出现了在本身台式电脑(默认100%)上开发出来的页面都是按照100%比例来开发的,之后在笔记本电脑上打开缩放比例的时候会出现字体大小显示不合理的问题,这种问题主要是因为device-pixel-ratio导致的。

解决办法:

1)新建一个js文件

// detectZoom.js
export const detectZoom = () => {let ratio = 0const screen = window.screenconst ua = navigator.userAgent.toLowerCase()if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio} else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI}} else if (window.outerWidth !== undefined &&window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth}if (ratio) {ratio = Math.round(ratio * 100)}return ratio
}

2)在入口文件main.js中引入

import { detectZoom } from '@/utils/detectZoom';
// 处理笔记本系统默认系统比例为125%或150%带来的布局影响
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);

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

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

相关文章

代码随想录算法训练营第五天| 总结数组专题

数组:二分查找、双指针(包括快慢指针)、滑动窗口、模拟 链表:双指针、三指针、虚拟头指针、复杂指针操作画图明确每一步(标好次序) 数组 代码随想录总结的很好,如下图。我再结合自己的一些理解…

AI 的未来是开源的

想象一下,在未来,人工智能不会被锁在公司的金库里,而是由全球创新者社区一砖一瓦地在开放中构建的。协作,而不是竞争,推动进步,道德考虑与原始绩效同等重要。这不是科幻小说,而是人工智能发展核…

【PostgreSQL内核学习(二十四) —— (ALTER MATERIALIZED VIEW)】

ALTER MATERIALIZED VIEW 概述源码解析修改物化视图的属性和行为AlterTableStmt 结构体AlterTableMoveAllStmt 结构体 重命名RenameStmt 结构体 设置对象依赖于扩展AlterObjectDependsStmt 结构体 测试用例 声明:本文的部分内容参考了他人的文章。在编写过程中&…

C++I/O流——(4)格式化输入/输出(第二节)

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 含泪播种的人一定能含笑收获&#xff…

73.网游逆向分析与插件开发-背包的获取-物品数据的初步数据分析

内容参考于:易道云信息技术研究院VIP课 上一个内容:72.网游逆向分析与插件开发-背包的获取-项目需求与需求拆解-CSDN博客 然后首先找切入点: 通过药物来当切入点,药物比较好使用,然后鼠标放到药物上它有名字、种类、…

Java注解技术

1. 注解的简介 从JDK 5开始,Java增加了对元数据(MetaData)的支持,也就是注解(Annotation)。 注解就是代码里的特殊标记,这些标记可以在编译、类加载、运行时被读取,并执行相应的处…

【分布式技术】分布式存储ceph之RGW接口

目录 1、对象存储概念 2、创建 RGW 接口 //在管理节点创建一个 RGW 守护进程 #创建成功后默认情况下会自动创建一系列用于 RGW 的存储池 #默认情况下 RGW 监听 7480 号端口 //开启 httphttps ,更改监听端口 #更改监听端口 ​ //创建 RadosGW 账户 …

【Go学习】macOS+IDEA运行golang项目,报command-line-arguments,undefined

写在前面的话:idea如何配置golang,自行百度 问题1:通过idea的terminal执行go test报错 ✘ xxxxxmacdeMacBook-Pro-3  /Volumes/mac/.../LearnGoWithTests/hello  go test go: go.mod file not found in current directory or any parent …

【LeetCode热题100】【子串】和为 K 的子数组

题目 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2: 输入:nums [1,…

Jet Brains 2023 开发者生态系统现状

一、前言 今天刷到Jet Brains官方发布了2023 开发者生态系统现状,这个相信大家都不陌生,我们的开发工具IDEA就是它旗下的。 分析的蛮不错的,今天整理一下,和大家一起分享。 有想法大家可以一起交流一下哈! 有兴趣的…

unity SqLite读取行和列

项目文件 链接:https://pan.baidu.com/s/1BabHvQ-y0kX_w15r7UvIGQ 提取码:emsg –来自百度网盘超级会员V6的分享 using System.Collections; using System.Collections.Generic; using UnityEngine; using Mono.Data.Sqlite; using System; using Syste…

LeetCode刷题--- 买卖股票的最佳时机含冷冻期

个人主页:元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言:这个专栏主要讲述动…

一个月学会Python,零基础入门数据分析

在数据分析领域,python是一个绕不开的知识和工具,如果不会用python就很难说自己会数据分析,但是最近很多想要入门数据分析的小白经常问我,Python怎么入门?Python虽然被称作是“最简洁的语言”,但是它终究还…

Jenkins 敏感信息实战指南

在 Jenkins 中,安全地管理敏感信息对于构建和部署过程至关重要。本实战指南将详细介绍如何添加凭据、使用 HashiCorp Vault 插件,并通过创建 Pipeline 脚本、在 shell 脚本中使用,以及在 Python 脚本中使用来管理敏感信息。 步骤 1: 添加凭据…

一文读懂——如何把网站改成HTTPS访问

HTTPS(全称为Hyper Text Transfer Protocol Secure)是一种在计算机网络上进行安全通信的协议,它通过SSL/TLS证书对传输数据进行加密,确保了用户与服务器之间信息交换的私密性和完整性。 获取SSL/TLS证书 选择证书类型&#xff1a…

构建高效数据生态:数据库、数据仓库、数据湖、大数据平台与数据中台解析_光点科技

在数字化的浪潮中,一套高效的数据管理系统是企业竞争力的核心。从传统的数据库到现代的数据中台,每一种技术都在数据的旅程中扮演着关键角色。本文将深入探讨数据库、数据仓库、数据湖、大数据平台以及数据中台的功能和价值,帮助您构建一个符…

《C++入门篇》——弥补C不足

文章目录 前言一.命名空间二.缺省参数三.函数重载四.引用4.1引用做参数4.2引用做返回值 五.内联函数六.小语法6.1auto6.2范围for6.3空指针 前言 C是业内一门久负盛名的计算机语言,从C语言发展起来的它,不仅支持C语言的语法,还新添加了面向对…

java基础之设计模式(单例模式,工厂模式)

设计模式 是一种编码套路 单例模式 一个类只能创建一个实例 饿汉式 直接创建唯一实例 package com.by.entity; ​ /*** 单例模式-饿汉式*/ public class ClassA {//static: 1. newClassA可以访问返回 2. 静态属性内存中只会存在一个//private: 防止外界直接访问属性priva…

redis总结--常见问题与解决办法,推荐等级

因为csdn只支持这种文档形式:不支持思维导图: 更好友好的阅读:可以看我的飞书--------思维导图(这样食用更加): 缓存穿透问题原因每次从缓存中都查不到数据,而需要查询数据库,同时数…