从窗口外观设置更改分辨率缩放比例后，如何保持相同的页面宽度

Question

我一直在用1920x1080px的屏幕分辨率编码一个网页，缩放比例设置为100%，但当我在朋友的屏幕上看到这个页面时，它的分辨率相同，但缩放比例为125%，我意识到页面看起来更大，并且有水平溢出，因为浏览器窗口的大小与不同的缩放比例不一样——100%为1920x965，125%为1536x740。。问题是，每个人都使用自己喜欢的缩放比例，那么有没有办法让页面看起来一样，也就是说在任何缩放集中都有相同的宽度？

Answer 1

您可以尝试以下操作：

document.body.style.zoom = "100%"

但是，这可能不适用于所有浏览器。您还应该注意，不同的浏览器处理缩放的方式不同；有些只缩放字体，有些也缩放字体和图像。因此，你应该设计你的网站，记住所有可能的屏幕场景；除非用户友好不是你的目标。

Answer 2

问题已解决，我所要做的就是为每个设备像素比率设置正确的缩放级别，如本网站中所述：https://silvawebdesigns.com/how-to-fix-windows-scaling-issues-above-100-for-your-website/

ps：缩放最好应用于根，而不是像我的代码示例中那样应用于元素：

@media (-webkit-device-pixel-ratio: 1) {
:root {
zoom: 1.25;
}
}
@media (-webkit-device-pixel-ratio: 1.1) {
:root {
zoom: 1.1;
}
}