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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
uuleaf6 分钟前
打字速度练习:零基础14天提升到80CPM键盘打字指南
计算机外设
TESmart碲视4 小时前
TESmart 推出全新 DP 1.4 双 8K@60Hz KVM 切换游戏扩展坞,助力专业与游戏工作流高效整合
游戏·计算机外设·音视频·kvm切换器·tesmart
tealcwu6 小时前
【Unity踩坑】Simulate Touch Input From Mouse or Pen 导致检测不到鼠标点击和滚轮
unity·计算机外设·游戏引擎
SamtecChina20231 天前
Samtec小课堂| 电气设计中电缆组件的注意事项
大数据·数据仓库·人工智能·汽车·计算机外设
我送炭你添花1 天前
Pelco KBD300A 模拟器:TEST02.重构后键盘部分的测试操作一步一步详细指导
python·重构·自动化·计算机外设·运维开发
WF_YL1 天前
通用显示器校准教程 验证显示器Win自带工具
计算机外设
呉師傅1 天前
东芝3515AC彩色维修图怎么打印?
运维·网络·windows·计算机外设·电脑
游戏23人生2 天前
QT linux下 虚拟键盘使用及注意事项
linux·qt·计算机外设
我送炭你添花2 天前
Pelco KBD300A 模拟器:06+6.键盘按键扩展、LCD 优化与指示灯集成(二次迭代)
python·自动化·计算机外设·运维开发
我送炭你添花2 天前
Pelco KBD300A 模拟器:TEST01.重构后键盘部分的测试方案规划
python·重构·自动化·计算机外设·运维开发