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: Cascading Style Sheets | 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">

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

Windows屏幕缩放混乱css大小

3 个答案: