Windows 屏幕比例弄乱了 css 大小答案

【问题标题】：Windows screen scale messing up css sizesWindows 屏幕比例弄乱了 css 大小
【发布时间】：2018-09-28 10:01:02
【问题描述】：

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

如何处理？ CSS？ JS？老实说不知道如何处理这个

详情：

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

谢谢

【问题讨论】：

不确定您所说的“处理这个”是什么意思？您将在其他高分辨率显示器上遇到类似问题。在 css 中，您必须使用媒体查询（最小/最大分辨率、最小/最大设备像素比）添加特殊规则，在 javascript 中，您必须将大小/位置乘以 window.devicePixelRatio 以获得“真实" 像素位置
px 单位使用过多，可能。请改用em 或rem。
我认为这不是分辨率问题。通过“处理这个”，我的意思是创建一个在所描述的情况下保持相同规模的解决方案
这个windows“功能”完全是个误会，严重扰乱了网站的布局。尤其是 1920x1080 的分辨率对于现代 14 英寸屏幕来说已经不是什么稀奇事了，“推荐”比例是 150% [叹气]

标签： javascript reactjs css

【解决方案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: Cascading Style Sheets | MDN

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

【讨论】：

谢谢，我会测试一下并告诉你
这对我有用，但我们如何处理如果用户在 windows 中的 125% 设置之上将页面缩放到 125% 的情况？
很抱歉反馈迟了，但我已经实现了它，它就像一个魅力 - 谢谢你

【解决方案2】：

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

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

【讨论】：

【解决方案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;
  }
}

【讨论】：