Windows 屏幕比例弄乱了 css 大小

Question

Having a weird issue, on Windows 10 in the screen settings on some laptops the default value (the recommended) is 125% so when opening a web page everything is to big because the page was build for 100%

How this can be handled? css? JS? honestly don't know how to approach this

Details:

• Web app built with React.
• In 100% everything is scaled correctly
• From the problematic laptop other websites are scaled correctly (with the settings on 125%)
• Problematic laptop (don't know if this is relevant) Lenevo yoga 730 15inch

Thanks

Answer 1

In CSS you can use (not standard yet):

// refers to 125% @media (-webkit-min-device-pixel-ratio: 1.25) { ... }

and

@media (-webkit-max-device-pixel-ratio: 1.25) { ... }

In Javascript you can use:

window.devicePixelRatio > 1.25 ? doA() : doB()

Reference:

-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

You could use CSS resolution for this

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