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

如下图所示,我们的电脑屏幕可以进行缩放,和分辨率的切换。

我们在项目开发中,时常需要适配不同的分辨率。

一般来说,开发人员电脑分辨率显示正常的页面,只会在更小的分辨率尺寸中出现问题。

所以当测试人员给我们提分辨率兼容的问题单的时候,一般都是我们开发的页面,在更小的分辨率尺寸中显示异常。

但是因为电脑型号的不同,测试人员的机器电脑分辨率在我们的显示器中不一定有。

那么其实我们可以通过缩小我们的浏览器窗口,达到模拟测试人员机器的电脑分辨率的情况。

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

但是有时候,测试人员的电脑会进行放大。

关于放大对界面的影响,放大多少比例,相当于页面宽度缩小多少比例的效果。如下显示器放大125%,那么页面的宽度是1920/125% = 1536px

所以如果我们要模拟显示器放大的效果,我们以对应的比例缩小窗口宽度即可模拟该效果了。

总结下,比如测试人员显示器分辨率是1920px的宽度,显示器缩放是125%的放大比例。

那么我们把我们的窗口宽度调整为1920/1.25% = 1536px的宽度,即可模拟测试人员的电脑显示状况,方便我们复现问题。

相关推荐
培林将军12 分钟前
C51单片机-单按键输入识别,键盘消抖
单片机·嵌入式硬件·计算机外设
qq_406144495 小时前
wincc利用拓展屏实现多台显示器显示单个项目配置方法详解
计算机外设
小锋学长生活大爆炸1 天前
【踩坑】装了显卡,如何让显示器从主板和显卡HDMI都输出
计算机外设·gpu·显卡·hdmi·外设
20岁30年经验的码农2 天前
java 鼠标点击和移动和键盘事件
java·开发语言·计算机外设
sensor_WU2 天前
【delphi】判断多显示器下,程序在那个显示器中
计算机外设·多显示器·程序在那个显示器上
qq_395716173 天前
电脑键盘功能基础知识汇总
单片机·计算机外设·电脑
狂睡GG爆3 天前
流行的蓝牙耳机类型推荐?分享挂耳式的开放式耳机排行榜10强
计算机外设
oh,huoyuyan3 天前
火语言RPA流程组件介绍--鼠标拖拽元素
计算机外设·rpa
188_djh7 天前
# 键盘字母上有下标数字,输入时怎么一键去掉,关闭键盘上的下标数字。‌
windows·计算机外设·电脑·电脑使用技巧·去掉键盘下标数字
科技领袖7 天前
8K回报率10枚自定义按键,PC游戏丝滑操作,雷柏VT1 Pro MAX鼠标体验
游戏·计算机外设·数码科技