Windows 10 缩放默认值高于 100% 导致网站大小调整问题

Question

因此，客户对其网站在笔记本电脑上的呈现方式不满意，因为 Windows 缩放（不要与浏览器缩放混淆）默认设置为 125%。该网站没有损坏，但他们不喜欢整体的缩放级别。

经过一番研究后，看起来在某些笔记本电脑上建议和默认缩放超过 100% 并不罕见（尤其是具有更高像素密度的新型笔记本电脑）。有人建议我将所有基于 px 的 CSS 转换为 rems（这是一项艰巨的工作）也许可以解决这个问题。然而，我使用 10px 的基本字体大小运行了一个测试，然后使用 rems 作为断点和字体，当我在不同的比例之间切换时，它看起来并没有更好。

在我看来，如果操作系统设置的缩放比例大于 100%，那么包括网站在内的所有内容都会相应显示。我想知道我是否在这里遗漏了一些东西？我碰巧在一个非常蹩脚的旧低分辨率屏幕上工作，所以也许这是一个令人困惑的因素？

使用 rem 小提琴

html {
  font: 10px;
}

.wrapper {
  display: flex;
  justify-content: center;

  .inner {
    flex: 1;
    padding: 1rem 2rem;
    background: hotpink;

    p {
      font-size: 1.6rem;
    }
  }
}

@media (min-width: 60rem) {
  html {
    font-size: 16px;
  }
  .wrapper {
    .inner {
      flex: 0 1 50rem;
      background: goldenrod;

      p{
          font-size: 1.125rem;
      }
    }
  }
}

并使用 px 进行拨弄

  font: 16px;
}

.wrapper {
  display: flex;
  justify-content: center;

  .inner {
    flex: 1;
    padding: 10px 20px;
    background: hotpink;

    p {
      font-size: 16px;
    }
  }
}

@media (min-width: 600px) {
  .wrapper {
    .inner {
      flex: 0 1 800px;
      background: goldenrod;

      p {
        font-size: 18px;
      }
    }
  }
}

有解决办法吗？

谢谢

Answer 1

由于您客户的设备像素比，网站可能会为其屏幕“真实”宽度提供意外的响应版本。

例如：假设您使用像 Bootstrap 那样的断点，如果他们的显示器的分辨率宽度为 1200px（超大设备），但缩放设置为 125%，浏览器会将所有内容缩小到 80% 并使网站提供相应的版本屏幕宽度为 960px（大型设备）。

（请参阅此站点来测试“真实”尺寸并根据显示器调整尺寸。）

根据您网站的构建方式，您可以通过以下方式解决此问题：

(1) 使用 JS 调整视口宽度，与此线程中提出的方式类似：

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));

(2) 调整样式表以使断点反映真实的设备宽度：

@media (min-width: 1200px), (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
  /* your code here */
}

或者甚至检测客户的特定像素比，然后缩小所有内容，如下所示：

@media (-webkit-device-pixel-ratio: 1.25) {
  * {
    zoom: 0.8;
  }
}

（请注意，在这些场景中，您需要使用非标准的，尽管得到良好支持的@media 功能。）