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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
峥嵘life4 天前
Android16 EDLA 开机向导的锁屏设置页面,HDMI out 鼠标不显示问题分析解决
计算机外设
一晌小贪欢4 天前
Python键盘鼠标自动化库详解:从入门到精通
python·自动化·计算机外设·python鼠标·python键盘·python操控鼠标·python操控键盘
避避风港4 天前
联想键盘失灵处理方法
计算机外设
fukai77226 天前
BetterDisplay Pro for Mac显示器增强工具
macos·计算机外设
dldw7777 天前
银河麒麟定制版系统奇葩问题之鼠标坏了,还原系统
计算机外设
ken22328 天前
在被窝里使用笔记本电脑,容易损坏键盘?
计算机外设·电脑
某林2128 天前
如何使用ROS 2与STM32进行串口通信,并实现通过键盘按键‘1’来控制LED灯开关
stm32·嵌入式硬件·计算机外设
阿昭L10 天前
计算机外设与CPU通信
汇编·计算机外设
Xxtaoaooo10 天前
从普通屏到 明基RD320U:一台显示器如何提升我的编码效率?
计算机外设·专业工具·明基rd320u·专业编程显示器·提效工具
扬道财经12 天前
中小手抓握鼠标推荐:罗技GPW4小狗版,为亚洲手型而生的“小尺寸旗舰”
计算机外设