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

79

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

知道为什么会这样吗？

— 科比·布莱恩特
source

1

最终导致resize事件出现问题，但是由于我的元素高度设置为视口的100％，因此正在滚动计算它。

— KobeBryant 2013年

48

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

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

— 阿尔贝托·弗兹
source

3

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

— Studocwho

我已在我的答案中添加了一个链接，以提供有关如何在Chrome移动版上解决此问题的更多信息。

— AlbertoFdzM

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

— MarsAndBack

72

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

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

然后在调整大小事件处理程序中即可。

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

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

— 威蒂
source

5

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

— Yuriy Kvartsyanyy 2014年

14

该问题是由滚动条的隐藏或显示引起的，导致屏幕的高度发生变化，从而触发$(window).resize()。我建议进行修改。

— Sander Koedood 2015年

3

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

— 克里斯·克劳斯

4

因为是高度在变化，因此if条件只能检查宽度的变化。同样，只有在宽度和高度都改变后才触发条件。并非总是如此，但是几乎所有屏幕调整大小都涉及宽度的变化，因此我建议不要使用高度部分。if($(window).width() != width){ }

— Imran Bughio '16

7

应该是|| 代替&&

— Maysam Torabi '16

4

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

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

展开摘要

— 安德里森
source

2

我认为您应该使用$（window）.height（）而不是$（document）.height（）和width。

— Tarek El-Mallah '17

1

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

开发响应式网站时，我在Android上的Chrome浏览器中遇到了此问题。调整窗口大小时，我想隐藏菜单（由于某些设计元素需要适当放置），但是Chrome for android的行为会触发滚动大小调整事件，这有点困难。

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

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

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

我最终添加了一个条件，该条件仅在更改宽度时才隐藏菜单，而在更改高度时不隐藏菜单。这对我来说有效，因为我只需要在更改宽度时重写菜单即可。

— 安德斯·加德布林（Anders Gardebring）
source

1

我的建议是省略检查高度，仅检查宽度。

— 伯蒂2014年

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

— MarsAndBack

1

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

— 艾伦·埃斯皮内特（Alan Espinet）
source

0

这是滚动移动上Javascript调整大小事件的重复

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

— 布兰登
source

不正确此问题与在移动浏览器中意外触发的调整大小事件有关。

— user2867288

5

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

— dudewad 2015年

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

— centurian

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

— AMNBandara

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

— MarsAndBack

0

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

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

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

— 德布鲁
source