Windows 10 缩放默认值超过 100% 导致网站大小问题

Question

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

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

在我看来，如果 OS 设置为大于 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, although well supported @media 功能。）

Windows 10 缩放默认值超过 100% 导致网站大小问题

Windows 10 scaling default above 100% causing website sizing issues

css

windows

zooming