Windows屏幕缩放弄乱了css大小

Question

有一个奇怪的问题，在某些笔记本电脑的屏幕设置中的Windows 10上，默认值(推荐(为125%，因此在打开网页时，一切都很大，因为该页面是为100%构建的

如何处理？.JS？老实说不知道如何处理这个问题

详：

• 使用 React 构建的 Web 应用程序。
• 在 100% 中，一切都正确缩放
• 从有问题的笔记本电脑上，其他网站可以正确扩展(使用125%( 上的设置
• 有问题的笔记本电脑(不知道这是否相关(Lenevo yoga 730 15inch

谢谢

Answer 1

在CSS中你可以使用(还不是标准的(：

// refers to 125% @media (-webkit-min-device-pixel-ratio: 1.25) { ... }

和

@media (-webkit-max-device-pixel-ratio: 1.25) { ... }

在Javascript中，你可以使用：

window.devicePixelRatio > 1.25 ? doA() : doB()

参考：

-

webkit-device-pixel-ratio - CSS： 级联样式表 |多核

Window.devicePixelRatio - Web API インターフェイス |多核

Answer 2

您可以

尝试在索引的 head 部分添加视口元标记.html：

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Answer 3

你可以为此使用 CSS 解析

/* Exact resolution */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}
/* Minimum resolution */
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}
/* Maximum resolution */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}