bootstrap, bootstrap-material-design, 300% 高分辨率显示

Question

我的屏幕分辨率为 3800x2400，建议使用 300%。我有一个屏幕为 1920x1080（监视器 1）和另一个如上所述（监视器 2），我正在使用 rems，我的代码在监视器 1 中显示完美，但在监视器 2 中变得太大：所有尺寸、边距、当我检查 DOM 时，px 中的填充是相同的，除了在监视器 2 中它显示得太大并且有滚动条。

html { 
  font-size: 8px;

  @media (min-width: @screen-sm-min-width) { 
    font-size: 10px;
  }

}

@screen-sm-min-width = 768px

我使用基于 8 像素计算移动设备的 rems，基于 10 像素计算平板电脑或更大尺寸。

监视器 1

监视器 2

在监视器 2 中，它太大了，需要滚动条。我检查了 DOM，所有尺寸都以 px 为单位，与监视器 1 相同。为什么会这样显示？

Answer 1

这是 DPI 缩放的问题。 Chrome has had issues with this since version 54.

如果您在 Windows 10 上运行 Creator 的更新，您可以通过转到 Web 浏览器的属性，选择“兼容性”并选中“覆盖高 DPI 缩放行为”来解决此问题。