如何根据屏幕大小更改网页缩放？

Question

嗨，我创建了一个网页，在我的桌面显示器上看起来很好。但是当我使用笔记本电脑查看页面时，页面看起来异常。然而，当我将页面缩放到67％时，它看起来正常。我的显示器和笔记本电脑具有相同的分辨率，即1920 x 1080，但我的显示器比笔记本电脑的大。我知道我可以在CSS中更改缩放比例，但这样会在我的电脑上看起来很糟糕。我想知道是否有一种方法可以根据屏幕大小在JavaScript或CSS中更改缩放比例。

- Transformer

---

这个问题并不容易。也许可以通过devicePixelRatio来帮助你：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio 祝好，Paul - undefined

Answer 1

一种选择是在CSS中使用媒体查询，根据屏幕大小改变应用的样式。您可以拥有适用于较大屏幕（如PC）的一组样式，以及适用于较小屏幕（如笔记本电脑）的另一组样式。

- timtim17

Answer 2

如果您在HTML中包含viewport元标记，可以使用JavaScript实现此功能。

if (document.body.clientWidth < /*screen width pixels*/) {
  viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'width=device-width, initial-scale=0.67, user-scalable=0');
}

您可以使用不同的值替换下面的属性来测试适合您的内容。

initial-scale 属性控制初始缩放级别（可选范围为10%-1000%或0.1-10.0）。

user-scalable=0 防止用户进行缩放操作。

- Ryan

---

我可以问一下在if语句中，应该把屏幕宽度像素设置为多少吗？ - undefined

你可以尝试插入你的显示器宽度，因为网页在它们上面看起来很好。例如，如果 (document.body.clientWidth < 2048) {...} - undefined

虽然请记住，这段代码片段只是一个小的概念验证。为了完全覆盖，您可能需要编写各种条件语句来适应许多其他屏幕分辨率。除非您只需要为个人笔记本电脑指定缩放比例，否则您可以考虑使用CSS中的媒体查询，就像@timtim17提到的那样。 - undefined