有没有办法让页面布局完美适应 100% 缩放，但也尊重更大的缩放系数？答案

【问题标题】：Is there a way to make page layout fit perfectly at 100% zoom but also respect greater zoom factors?有没有办法让页面布局完美适应 100% 缩放，但也尊重更大的缩放系数？
【发布时间】：2023-03-23 17:40:01
【问题描述】：

有几种方法可以布局网页以使其适合浏览器视口 (DOM window)。当我说“适合”时，我包括更改所使用字体的大小，更改 DIV、IMG 和其他渲染元素的宽度和高度，以及允许元素的“流畅”移动。目标是使页面在所有显示设备上看起来都“漂亮”，从小型手机到大型桌面屏幕。这些布局方式包括使用 CSS em 和 % 大小、包装文本和元素以及由 onload 和 onresize 事件运行的 JavaScript。布局拟合可以几乎完美地跨浏览器工作，但复杂的结果可能对浏览器缩放不敏感，因为缩放会神奇地改变窗口宽度，这意味着没有任何独立于浏览器的可靠方法来检测缩放（DOM 和CSS 标准忽略浏览器缩放）。无法检测由于设备屏幕小而导致的小窗口宽度与由于缩放因子大而导致的小窗口宽度之间的差异。我们希望以不同的方式处理这两种情况，因为视力受损的用户需要使用缩放系数。

有没有人成功地以尊重缩放的方式很好地调整布局（包括更改字体大小）？例如，如果用户以 200% 的缩放比例访问页面，最初只应显示页面的左上四分之一（其余部分可通过水平和垂直滚动获得），而同一页面将完全适合窗口对于将缩放设置为 100% 的其他用户。

【问题讨论】：

在我写的this site 上扩展和缩小您的浏览器。我可以写一个答案，以防有人有兴趣知道这是如何完成的。
刚刚访问了您的网站。它根本不响应增加缩放。这里的问题与扩大或缩小浏览器窗口无关。
@JoseRuiSantos 500 Internal Server Error，确实可以很好地扩展。
@SQB 不幸的是，该站点现已关闭。但是here你可以看到按钮和汽车是如何响应浏览器宽度的。

标签： javascript css layout zooming

【解决方案1】：

确实要具有流畅的布局，您必须使用 % 来确定宽度而不是像素。并且为了适合屏幕使用 100%

【讨论】：

这不是一个好的答案，因为它只解决了流畅布局的问题，而忽略了浏览器缩放。这道题其实是一个非常高级、非常难的题，不只是初学者的题。

【解决方案2】：

只需添加以下元标记

<meta name="viewport" content="width=device-width,
                      initial-scale=1.0,
                      maximum-scale=1.0,
                      user-scalable=0">

【讨论】：