88

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

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

4

7 回答 7

79

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

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

然后在你的调整大小事件处理程序中你可以做。

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

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

于 2013-06-26T19:29:30.217 回答
54

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

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

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

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

于 2015-01-15T15:05:56.150 回答
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
    }
}

于 2014-12-21T07:55:17.170 回答
3

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

于 2018-01-08T18:43:44.300 回答
1

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

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

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

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

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

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

于 2013-07-30T17:15:56.710 回答
1

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

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

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

于 2016-05-17T21:20:37.430 回答
0

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

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

于 2013-06-26T19:28:53.050 回答