移动 chrome 在滚动时触发调整大小事件

Posted 2023-02-22

【中文标题】移动 chrome 在滚动时触发调整大小事件

【英文标题】：mobile chrome fires resize event on scroll

【发布时间】：2013-06-24 02:29:52

【问题描述】：

我在galaxy s4，android 4.2.2上使用chrome移动浏览器，由于某种原因，每次我向下滚动页面时，它都会触发一个resize事件，该事件通过jquery.cycle2幻灯片中的图像缩放来验证。

知道为什么会发生这种情况吗？

【问题讨论】：

它最终成为了调整大小事件的问题，但因为我的元素高度设置为视口的 100%，所以它在滚动时被重新计算。

【参考方案1】：

出于好奇，我试图重现它，如果我是正确的，这是由导航铬栏引起的。

当您向下滚动并且 chrome 隐藏浏览器导航栏时，它会调整窗口大小，但这是正确的，因为在此之后，由于浏览器导航栏剩余的可用空间，我们有更大的窗口大小。

相关文章：https://developers.google.com/web/updates/2016/12/url-bar-resizing

考虑CWitty answer 以避免这种行为。

【讨论】：

无论它是否是预期行为，我们都不希望它触发调整大小功能。那么这里的解决方案是什么，而不是走其他答案所建议的冗长代码的路线？

我在我的答案中添加了一个链接，提供了有关如何在移动版 Chrome 上处理此行为的更多信息。

最简单的方法是在您的视口监听器触发后比较高度与宽度。如果只有高度发生了变化，那么本机浏览器工具栏很可能正在影响视口高度。如果存在用户仅通过高度影响视口尺寸的情况，那么您可以进一步分析距离和时间，以辨别是用户输入还是系统输入改变了视口。

@MarsAndBack 但是分析系统或用户是否通过添加更多计算改变了高度不是太多了吗？这里的问题是，当太多的调整大小处理程序来自不同的脚本并且仅仅因为 urlbar 发生变化时，要避免调整大小。

@ShashankBhatt 是的，尽量减少总调用次数是对的，但是当设备没有其他相关数据可用时，您就没有什么选择了。对于我的特定应用程序，在一个特定的关键上下文中执行此操作是有意义的。无论如何，除非有这方面的通用标准，否则我们只能听从设备制造商的善意和滞后的远见。

【参考方案2】：

这听起来很奇怪，但我在其他浏览器中看到过。您可以像这样解决这个问题。

var width = $(window).width(), height = $(window).height();

然后在你的 resize 事件处理程序中你可以做。

if($(window).width() != width || $(window).height() != height)
  //Do something

我不知道你的函数的范围和所有这些，但你应该从中了解要点。

【讨论】：

拯救了我的一天！我只需要检查宽度

问题是滚动条隐藏或显示导致屏幕高度发生变化，从而触发$(window).resize()。我提出了修改建议。

只是想补充一点，我们在 ios Safari 上也观察到了类似的行为。

因为它是改变 if 条件的高度应该只检查宽度的变化。此外，直到宽度和高度都发生变化时才会触发条件。情况并非总是如此，但几乎所有屏幕重新大小都涉及宽度的变化，所以我建议不要使用高度部分。 if($(window).width() != width)

应该是||而不是 &&

【参考方案3】：

移动设备中的浏览器通常会在有人向下滚动时隐藏其水平顶部导航栏，并在向上滚动时再次显示。此行为会影响客户端的大小，触发 resize 事件。您只需要控制不因为高度变化或至少因为高度变化而不执行代码。

【参考方案4】：

原来有很多东西可以在各种移动浏览器中触发resize。

我知道链接到外部资源并不理想，但 QuirksMode 有一个我不想在此处复制（或维护）的可读表： http://www.quirksmode.org/dom/events/resize_mobile.html

举个例子，让我们明白：显然在许多浏览器中，打开软键盘会触发事件。

【参考方案5】：

我不知道它是否仍然有趣，但我的解决方案是：)

var document_width, document_height;

$(document).ready(function()

	document_width=$(document).width(); document_height=$(document).height();
    // Do something


$(window).resize(function()

    if(document_width!=$(document).width() || document_height!=$(document).height()) 
    
        document_width=$(document).width(); document_height=$(document).height();
        // Do something
    
	

【讨论】：

我认为你应该使用 $(window).height() 而不是 $(document).height() 和 width。

【参考方案6】：

这个问题已经回答了，但是由于这个问题没有提出响应式网站的问题，所以我想补充一些关于此的信息。

在开发响应式网站时，我在 Android 上的 Chrome 中遇到了这个问题。在调整窗口大小时，我想隐藏菜单（由于某些设计元素需要正确定位），但是 Chrome for android 行为在滚动时触发调整大小事件使得这有点困难..

切换到开始使用 onOrientationChange 不是一个选项，因为这是一个响应式网站，台式 PC 上没有方向更改，但我仍然需要代码才能在普通 PC、平板电脑和智能手机上工作。

我本可以开始进行浏览器嗅探等，但到目前为止我已经能够避免这种情况..

我尝试实施 CWitty 建议的解决方案，但实际上向上或向下滚动会触发高度变化，但也不起作用。

我最终添加了一个仅在宽度更改时隐藏菜单的条件，而不是在高度更改时隐藏菜单。这适用于我的情况，因为我只需要在更改宽度时重写菜单。

【讨论】：

我的建议是不检查高度，只检查宽度。

接受的答案仍然适用；您可以根据需要继续执行逻辑。最终，您自己发现了这一点，这应该只是已接受答案下的评论。

【参考方案7】：

这是javascript resize event on scroll mobile的副本

为了修复它，使用 onOrientationChange 和 window.orientation 属性。查看相关答案：here

【讨论】：

不正确。这个问题是关于在移动浏览器中意外触发的调整大小事件。

其实这不一定是错误的。使用 onOrientationChange 是一种合法的解决方法，因为在移动设备上您最有可能看到屏幕调整大小事件触发。这个答案很好。我不会仅仅因为存在另一种情况而无法支持它 - 那就是浏览器镶边出现/消失导致调整大小事件（这是我的问题 ATM）。否则这将是一个很好的解决方案。

假设您应该捕获调整大小事件以调整屏幕上的元素；你打开你的开发者工具，一切都可以调整窗口大小，你甚至可以上下滚动！现在，您决定在平板电脑上打开页面，上下滚动，一切都在重新调整，在您的屏幕上显示地震！您仍然需要在 PC 上处理窗口大小调整事件！所以，这不是一个正确的答案！

我使用 window.resize 来跟踪方向变化。因而面临这个问题。这是个好主意。

答案中甚至链接答案中都没有正确的示例代码，并且外部链接已失效。在任何情况下，OP 问题都涉及基本滚动，没有方向变化，无论方向如何，都会触发调整大小事件。简单地检查高度变化是最有效的通用方法。 onOrientationChange 在其他地方很有用..