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

Question

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

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

Answer 1

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

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

然后在您的调整大小事件处理程序中，您可以执行此操作。

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

我不知道您的功能范围以及所有这些，但是您应该从中了解要点。

Answer 2

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

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

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

考虑CWitty 回答以避免这种行为。

Answer 3

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

 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 } }

Answer 4

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

Answer 5

这个问题已经得到了回答，但由于这个问题没有提出响应式网站的问题，我想添加一些相关信息。

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

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

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

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

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

Answer 6

事实证明，有很多东西可以在各种移动浏览器中触发resize 。

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

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

Answer 7

这是滚动移动设备上 Javascript 调整大小事件的副本

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