Javascript Windows屏幕缩放弄乱了css大小

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

如何处理？css？JS？ 老实说，我不知道该怎么做

详情：

• 使用React构建的Web应用程序
• 在100%的情况下，所有内容都已正确缩放
• 通过有问题的笔记本电脑，其他网站可以正确缩放（使用 设置为125%）
• 有问题的笔记本电脑（不知道这是否相关）

  Lenevo瑜伽730 15英寸

---

谢谢

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

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

在CSS中您可以使用（还不是标准）：

//指125%
@媒体（-webkit最小设备像素比：1.25）{…}

及

@media（-webkit最大设备像素比：1.25）{…}

在Javascript中，您可以使用：

window.devicePixelRatio>1.25？doA（）：doB（）

参考：

---

您可以使用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;
  }
}

---

不知道你说的“处理这件事”是什么意思？在其他高结果显示上也会出现类似问题。在css中，您必须使用mediaqueries（最小/最大分辨率、最小/最大设备像素比率）添加特殊规则，在javascript中，您必须将大小/位置乘以window.devicePixelRatio以获得“真实”像素位置可能使用了太多的

px

单位。用

em

或

rem

代替。我认为这不是解决问题的方法。我所说的“处理”是指创建一个在所描述的情况下保持相同规模的解决方案。这个windows“功能”完全是一个误解，严重扰乱了网站的布局。特别是1920x1080分辨率对于现代14英寸屏幕来说已经不是稀罕事了，“推荐”比例是150%[叹气]谢谢我会测试一下，让你知道这对我来说很有效，但是如果用户在windows中的125%设置的基础上将页面缩放到125%，我们怎么处理呢？很抱歉，反馈太晚了，但我实施了它，它就像一个魅力-谢谢你