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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
神奇程序员9 天前
不止高刷:明基 RD280UG 在编码场景下的表现如何
计算机外设
开开心心就好9 天前
安卓开源应用,超时提醒紧急人护独居安全
windows·决策树·计算机视觉·pdf·计算机外设·excel·动态规划
上海合宙LuatOS9 天前
LuatOS核心库API——【iotauth 】 IOT 鉴权库
java·单片机·嵌入式硬件·物联网·struts·计算机外设·硬件工程
谁刺我心10 天前
qml自定义鼠标
计算机外设
SamtecChina202310 天前
Samtec连接器设计研究 | 载流量:温升为什么重要?
大数据·网络·人工智能·算法·计算机外设
ACP广源盛1392462567310 天前
GSV6502与GSV2001应用场景相同点和差异点对比@ACP
单片机·计算机外设
凌云拓界11 天前
TypeWell全攻略(二):热力图渲染引擎,让键盘发光
前端·后端·python·计算机外设·交互·pyqt·数据可视化
南山十一少12 天前
cherry键盘组合MacBook使用
计算机外设
开开心心就好13 天前
免费音频转文字工具,绿色版离线多模型可用
人工智能·windows·计算机视觉·计算机外设·ocr·excel·语音识别
开开心心就好14 天前
实用系统备份还原,小巧免PE备份快镜像小
windows·计算机视觉·pdf·计算机外设·迭代器模式·excel·桥接模式