使用javascript和css调整浏览器大小的问题

Browser resize issues with javascript and css

本文关键字：问题浏览器调整 javascript css 使用更新时间：2023-09-26

我有一个图像网格，它是通过角度。。。每个图像由特定的边距分隔，整个网格通过自动边距在页面中居中。当调整浏览器的大小时，显示的列数也会随之调整，以便显示全部列（没有一列被截断）。右上角还有几个固定的链接。一切都很好。然而，如果用户将缩放级别更改为低于100%，javascript代码仍然认为比实际空间多了一列（而且它似乎总是关闭不超过一两个像素）

我想我需要能够访问浏览器缩放级别，并对硬编码值进行微小调整（尽管在浏览器级别缩放时不需要这样做，因为一切都应该缩小）出于某种原因，放大时不会发生这种情况（即110%的图像不可用，因为我只能上传两个链接）。。。您可以看到，在90%的情况下，列的容器认为有一个完整的额外列，但这些列不适合。

100%观看以90%观看

更新：我找到了滑块面板（包含元素）在100%情况下，4列网格需要1248px的宽度在90%的情况下，4列网格需要1249px的宽度在75%的情况下，4列网格需要1251px的宽度在67%的情况下，4列网格将需要1252px 的宽度

仍在试图弄清楚是什么在不同的缩放级别下造成了这种像素大小的差异。

更新2：这个问题在Firefox和Chrome中存在，但在IE或Edge 中不存在

您尝试过使用flexbox吗？除非你需要支持旧的浏览器，否则它可以根据图像的大小将图像居中放置，你可以设置最大宽度/最小宽度，这将使flexbox包裹照片。

不过，如果没有看到代码布局，很难说。

如果您真的不想让用户缩放。只需添加此元标签

<meta name="viewport"content="width=设备宽度，初始比例=1.0，最大比例=1.0，用户可缩放=否"/>

用户停止缩放视口