Windows 屏幕比例弄乱了 css 大小

Question

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

如何处理？css？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：层叠样式表 | MDN

Window.devicePixelRatio - Web API ???????? | MDN

Answer 2

您可以尝试在 index.html 的 head 部分添加视口元标记：

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