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

Question

我的网站在某些设备上存在布局问题，我相信我已经追踪到高分辨率显示器，这些显示器也将 windows 10 中的显示缩放设置为 200%。 （不是浏览器中的 200%，而是 Windows 控制面板中的显示设置）

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

我知道有 VM 的网站会 运行 不同的浏览器用于测试目的，但我不知道有哪个网站允许您选择分辨率。如果不出去拿到这台特定的机器，我还能如何调试这个问题？

Answer 1

您可以在开发人员控制台中创建一个自定义设备，并以实际适合您屏幕的任何比例简单地显示它。例如，创建一个具有该特定分辨率的自定义设备，然后在 Chrome 的开发者控制台中，您可以将其缩小 50%（如果您自己的分辨率为 1920x1080），这样整个设备就可以看到了。

Answer 2

开发控制台中 emulation/scaling 选项中的 none 会模拟实际发生的情况。我最终远程访问了客户的计算机，因此我可以在那里进行自己的调试并解决了问题。

似乎 Edge v 44 正在为 div 高度错误地计算一些 CSS 计算函数（偏离 1 或 2 个像素），这使得一些 div 被推出并打乱布局。

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