如何解决 iOS 设备的错误调整大小行为

Posted 2023-03-14

【中文标题】如何解决 iOS 设备的错误调整大小行为

【英文标题】：How to solve erroneous resize behavior of iOS devices

【发布时间】：2017-10-10 13:02:53

【问题描述】：

在调整浏览器窗口大小时，我会收到 resize 事件，但在检查不同的 DOM 值（如可滚动高度等）时，这些值是错误的，并在新布局之前描述了这些值。

去抖调整大小解决了这个问题，但目前还不清楚去抖的最短时间是多少，因为它取决于页面的复杂性。

我找到了这些相关链接：

https://openradar.appspot.com/radar?id=5040881597939712

https://hackernoon.com/onresize-event-broken-in-mobile-safari-d8469027bf4d

问题是，除了在任意时间去抖动之外，还有什么方法可以解决这个问题？

【参考方案1】：

基于resize issue 的community answer，有一个使用参考DOM 元素的工作解决方案，在触发“调整大小”事件之前通过CSS 自动调整大小。比如：

CSS

html 
    width: 100% !important;
    height: 100% !important;

JS

window.addEventListener("resize", function() 
    rect = document.documentElement.getBoundingClientRect();
    realSize =  width: rect.width, height: rect.height ;
)

希望对你有帮助！

【讨论】：

感谢您的回答。我如何在不覆盖整个高度/宽度的元素上使用它？我可以直接获取元素并调用getBoundingClientRect() 吗？

@Phonolog 不客气！是的，你可以这样做：document.getElementById('id').getBoundingClientRect());

好的。您还可以添加指向您所指的社区答案的链接吗？