如何模拟高分辨率显示的Web布局问题

Question

我有一个网站，在某些设备上存在布局问题，我相信我已经找到了高分辨率的显示器，这些显示器在Windows 10中的显示比例也设置为200％。 （不是200％，而是Windows控制面板中的显示设置）

问题是我没有可以复制这些设备分辨率的设备，即2736 x 1824（这是MS Surface Pro）。哦，是的，这仅在Edge中发生...

我知道有VM的站点可以运行不同的浏览器以进行测试，但是我不知道有哪个站点允许您选择分辨率。不用出门就可以掌握这台特定的机器，我还能如何调试该问题？

Answer 1

您可以在开发人员控制台中创建自定义设备，然后以实际适合屏幕的大小显示它。例如，创建具有该特定分辨率的自定义设备，然后在Chrome的开发者控制台中，您可以将其缩小50％（如果您自己的分辨率为1920x1080），以便可以看到整个内容。

Answer 2

结果表明，开发控制台中的任何仿真/扩展选项都无法仿真实际发生的事情。我最终将远程计算机转移到客户的计算机中，以便可以在那里进行自己的调试并解决了该问题。

好像Edge v 44可能不正确地为div高度计算了CSS calc函数（偏移了1或2像素），这使某些div推出并弄乱了布局。

解决方法是调整CSS，因此不需要计算。