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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
道剑剑非道7 小时前
QT开发技术【qcustomplot 曲线与鼠标十字功能】
开发语言·qt·计算机外设
_李小白19 小时前
【OSG学习笔记】Day 13: 事件处理——响应键盘与鼠标
笔记·学习·计算机外设
AiFlutter1 天前
低代码平台开发手机USB-HID调试助手
单片机·游戏·计算机外设
cnbestec2 天前
Haply MinVerse触觉3D 鼠标—沉浸式数字操作,助力 3D 设计与仿真
3d·计算机外设·haply·minverse·minverse触觉3d鼠标·前沿科技
补三补四2 天前
操作系统:计算机世界的基石与演进
开发语言·windows·计算机外设
电子科技圈3 天前
XMOS空间音频——在任何设备上都能提供3D沉浸式空间音频且实现更安全地聆听
经验分享·设计模式·性能优化·计算机外设·音视频
剁椒排骨4 天前
win11什么都不动之后一段时间黑屏桌面无法显示,但鼠标仍可移动,得要熄屏之后才能进入的四种解决方法
运维·windows·经验分享·计算机外设·win11·win10
iFlyCai4 天前
对Mac文字双击或三击鼠标左键没有任何反应
macos·计算机外设
伊织code4 天前
BongoCat - 跨平台键盘猫动画工具
计算机外设·动画·键盘·bongocat
m0_738355695 天前
护眼-科学使用显示器
计算机外设