关于前端分辨率兼容和显示器缩放兼容的处理

news/2024/9/23 14:28:39/

如下图所示,我们的电脑屏幕可以进行缩放,和分辨率的切换。
在这里插入图片描述
我们在项目开发中,时常需要适配不同的分辨率。
一般来说,开发人员电脑分辨率显示正常的页面,只会在更小的分辨率尺寸中出现问题。
所以当测试人员给我们提分辨率兼容的问题单的时候,一般都是我们开发的页面,在更小的分辨率尺寸中显示异常。
但是因为电脑型号的不同,测试人员的机器电脑分辨率在我们的显示器中不一定有。
那么其实我们可以通过缩小我们的浏览器窗口,达到模拟测试人员机器的电脑分辨率的情况。

如下两图所示,在不同分辨率下,页面的宽度和分辨率的宽度是一致的。所以其实我们在1920的宽度分辨率下,把窗口缩小宽度到1600,是可以模拟1600分辨率的情况的。
在这里插入图片描述

在这里插入图片描述
但是有时候,测试人员的电脑会进行放大。
关于放大对界面的影响,放大多少比例,相当于页面宽度缩小多少比例的效果。如下显示器放大125%,那么页面的宽度是1920/125% = 1536px
所以如果我们要模拟显示器放大的效果,我们以对应的比例缩小窗口宽度即可模拟该效果了。

在这里插入图片描述
总结下,比如测试人员显示器分辨率是1920px的宽度,显示器缩放是125%的放大比例。
那么我们把我们的窗口宽度调整为1920/1.25% = 1536px的宽度,即可模拟测试人员的电脑显示状况,方便我们复现问题。


http://www.ppmy.cn/news/1523590.html

相关文章

什么是前端开发

前端开发技术 HTML CSS JavaScript HTML,全称Hyper Text Markup Language(超文本标记语言 CSS,全称Cascading Style Sheet(层叠样式表)​,是用来控制网页外观的一种技术。 JavaScript,就是…

DolphinDB 基准性能测试工具:金融模拟数据生成模块合集

测试 DolphinDB 数据库性能时,往往需要快速写入一些测试数据。为方便用户快速完成简单的基准性能测试,金融 Mock 数据生成模块覆盖了常用的金融数据集,满足用户生成模拟数据的需求。基于本模块生成的模拟数据不具有实际意义,建议仅…

小小GCD、LCM拿下拿下

目录 最大公约数(GCD) 最大公约数(GCD)求解: 一、辗转相除法 二、三目运算符 三、位运算 最大公约数(GCD)模板: 最大公约数(GCD)例题: 最…

CMU 10423 Generative AI:lec3(阅读材料:GPT1论文解读)

推荐参考:李沐的B站视频《GPT,GPT-2,GPT-3 论文精读》https://www.bilibili.com/video/BV1AF411b7xQ 一点记忆: GPT1参数量:大概1亿参数 12层decoder(维度768,12个注意力头) 训练集…

怎么抓住威士忌蓝海市场?

​前些天和朋友吃饭,聊起来威士忌。 朋友说,这个威士忌啊,最近几年增值特别快,甚至超过了黄金、名表、艺术品、红酒这些经典的投资品类。而且存放得越久,升值的幅度就越大。 再加上,中国的威士忌市场现在…

docker安装后修改默认数据存放目录

默认情况下,Docker 会将其所有的数据(包括下载的镜像、容器、卷以及网络等)存储在 /var/lib/docker 目录下,但是这个目录一般在根目录下,有时根目录空间紧张,你可以通过修改 Docker 的配置文件来更改这个默…

iOS——GCD再学习

GCD 使用GCD好处,具体如下: GCD 可用于多核的并行运算;GCD 会自动利用更多的 CPU 内核(比如双核、四核);GCD 会自动管理线程的生命周期(创建线程、调度任务、销毁线程)&#xff1b…

Springboot结构明晰

SpringbootMybatis自底向上结构明晰 Mapper和Mapper.xml层:dao层,数据持久层,与数据库直接接触的层级。 Mapper.xml:通过的方式指定相应mapper,查询等语句以 等包裹Mapper:是一个抽象接口,此接…