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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
ji_shuke19 小时前
使用 Canvas 和 mix-blend-mode 实现跟随鼠标的反色圆圈
microsoft·计算机外设·canvas
硅基手札21 小时前
【串口技术系列文档 04】UART协议深度解析
驱动开发·stm32·单片机·嵌入式硬件·mcu·计算机外设
开开心心_Every1 天前
电脑OCR识别软件支持表格识别图片转Excel
java·开发语言·微信·计算机外设·ocr·intellij-idea·excel
野蛮人6号3 天前
macbook连上外接显示器后,字体变小,如何设置成像原来本机的界面一样呢?
计算机外设
打工仔折腾 AI3 天前
从零写一个CAD 05:以鼠标为中心的滚轮缩放,招法能复用但顺序不能反
开发语言·后端·python·性能优化·计算机外设·swift·ai agent 实战
打工仔折腾 AI3 天前
从零写一个CAD 05:以鼠标为中心的滚轮缩放矩阵顺序不能反
后端·python·线性代数·性能优化·矩阵·计算机外设·ai agent 实战
打工仔折腾 AI6 天前
从零写一个CAD 04:中键拖动平移,抓住一个点让它一直待在鼠标底下
人工智能·后端·python·性能优化·计算机外设·ai agent 实战
李游Leo7 天前
HarmonyOS 7 ArkUI + Window Kit:折叠屏编辑页的键盘避让快照与焦点恢复时序【鸿蒙心迹】
华为·计算机外设·harmonyos
励志不掉头发的内向程序员8 天前
【从零写一个CAD 04】中键拖动平移:抓住一个点,让它一直待在鼠标底下
开发语言·c++·qt·学习·系统架构·计算机外设
你挚爱的强哥9 天前
【sgKeyboard】自定义组件:虚拟键盘
前端·javascript·计算机外设