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

Question

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

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

我知道一些网站有虚拟机，这些虚拟机会运行不同的浏览器进行测试，但我不知道有哪些网站可以让您选择分辨率。不出去拿这台特定的机器，我还能怎么调试这个问题？

Answer 1

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

Answer 2

事实证明，开发控制台中的任何模拟/缩放选项都无法模拟实际发生的情况。我最终远程连接到客户的计算机，这样我就可以在那里进行自己的调试并解决问题。

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

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