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

Question

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

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

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

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

和fiddle using 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

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

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

（请参阅this site 以测试“真实”并调整显示器的尺寸。）

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

(1) 用JS调整视口宽度，类似于this thread中提出的方法：

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

（请注意，在这些情况下，您需要使用non-standard，尽管well supported @media 功能。）