Windows屏幕缩放导致CSS大小混乱

Question

遇到了奇怪的问题，在Windows 10中，对于某些笔记本电脑屏幕设置中的默认值（推荐值）为125％，因此打开网页时一切都太大了，因为该页面是以100％构建的

如何解决？css？JS？ 老实说不知道怎么做

详情：

• Web应用程序使用React构建。
• 在100％时，所有内容都按比例缩放正确。
• 在有问题的笔记本电脑上，其他网站都按比例正确缩放（使用 125％的设置）
• 有问题的笔记本电脑（不知道这是否相关）Lenevo yoga 730 15inch

谢谢

- Blue Bot

---

不确定您所说的“处理”是什么意思？在其他高分辨率显示屏上也会遇到类似问题。在CSS中，您将需要使用媒体查询（min/max-resolution，min/max-device-pixel-ratio）添加特殊规则；在JavaScript中，您将需要通过window.devicePixelRatio将大小/位置乘以来获取“真实”的像素位置。 - Joschi

可能过多地使用了“px”单位。请改用“em”或“rem”单位。 - amedina

我认为这不是一个分辨率问题。通过“处理此事”，我指的是创建一个解决方案，在描述的情况下保持相同的比例。 - Blue Bot

这个Windows的“特性”完全是一个误解，会导致网站布局混乱。特别是现代14英寸屏幕上1920x1080分辨率已经不算罕见了，而且“推荐”的缩放比例是150% [哎]。 - Bart Az.

Answer 1

CSS中可以使用（目前还不是标准）：

// 指的是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

- xingo

---

谢谢，我会测试这个并告诉你。 - Blue Bot

这对我有效，但如果用户在Windows上设置为125％并放大页面，我们该如何处理？ - Nikhil Kamani

抱歉回复晚了，但我已经实现了它，而且效果非常好 - 谢谢。 - Blue Bot

Answer 2

您可以尝试在index.html的head部分添加一个viewport meta标签：

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

- Martin Reiche

---

我认为这不能解决问题。 - CodingTT

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;
  }
}

- dtar