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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
开开心心就好12 小时前
键盘改键工具免安装,自定义键位屏蔽误触
java·网络·windows·随机森林·计算机外设·电脑·excel
软件资深者14 小时前
USB存储设备管理工具 启用或者禁用+usb修复
windows·microsoft·计算机外设·系统修复
卢锡荣1 天前
Type-c OTG数据与充电如何进行交互使用应用讲解
c语言·开发语言·计算机外设·电脑·音视频
goodmao1 天前
【macOS】【mouse】设置鼠标大小
macos·计算机外设·鼠标·mouse
开开心心就好2 天前
键盘映射工具改键位,绿色版设置后重启生效
网络·windows·tcp/ip·pdf·计算机外设·电脑·excel
卢锡荣2 天前
Type-c小家电性价比方案讲解LDR系列
网络·人工智能·计算机外设·电脑
春日见2 天前
win11 分屏设置
java·开发语言·驱动开发·docker·单例模式·计算机外设
TESmart碲视3 天前
如何用一套键盘鼠标切换多个输入设备?TESmart KVM热键工作原理深度解析.一份涵盖设计原理、使用方法与兼容性的完整技术指南
游戏·macos·计算机外设·kvm切换器·双屏kvm切换器
JosieBook3 天前
【Vue】13 Vue技术—— Vue 中的键盘事件处理详解
javascript·vue.js·计算机外设
Hody914 天前
【XR开发系列】与玩家交互 - 用键盘控制小球移动
计算机外设·交互