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

和小提琴使用像素

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功能，尽管它得到了很好的支持。(