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

rta7y2nd  于 2023-03-07  发布在  jQuery
关注(0)|答案(7)|浏览(146)

我在Galaxy S4、Android 4.2.2上使用Chrome移动浏览器,由于某种原因,每次我向下滚动页面时,它都会引发一个调整大小事件,该事件通过缩放jquery.cycle2幻灯片中的图像来验证。
知道为什么会这样吗?

wvt8vs2t

wvt8vs2t1#

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

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

然后在resize事件处理程序中可以执行。

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

我不知道你的职能范围,但你应该从中得到要点。

7fyelxc5

7fyelxc52#

只是出于好奇,我试图重现它,如果我是正确的,这是由导航 chrome 栏。
当你向下滚动,chrome隐藏浏览器导航栏时,它会产生一个窗口大小调整,但这是正确的,因为在那之后,由于浏览器导航栏留下的自由空间,我们有一个更大的窗口大小。
相关文章:https://developers.google.com/web/updates/2016/12/url-bar-resizing
考虑CWitty answer以避免此行为。

lsmd5eda

lsmd5eda3#

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

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

wwodge7n4#

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

4zcjmb1e

4zcjmb1e5#

事实证明,有很多东西可以在各种移动的浏览器中触发resize
我知道链接到外部资源并不理想,但是QuirksMode有一个可读的表,我不想在这里复制(或维护):http://www.quirksmode.org/dom/events/resize_mobile.html
给予个例子,这个例子让我们:显然,在许多浏览器中,打开软键盘会触发该事件。

h5qlskok

h5qlskok6#

这个问题已经得到了回答,但由于这个问题没有提出响应网站的问题,我想补充一些信息。
我在开发一个响应式网站时在Android上的Chrome中遇到了这个问题。当调整窗口大小时,我想隐藏菜单(由于一些设计元素需要正确的定位),但Android上的Chrome在滚动时触发调整大小事件的行为使这变得有些困难。
切换到开始使用onOrientationChange是不是一个选项,因为这是一个响应网站,没有在台式电脑上的方向变化,但我仍然需要在普通PC上工作的代码:s,平板电脑和智能手机.
我本来可以开始做浏览器嗅探之类的,但到目前为止我已经能够避免这种情况。
我试着实现CWitty建议的解决方案,但由于向上或向下滚动实际上会触发高度变化,因此也不起作用。
最后我添加了一个条件,只在宽度改变时隐藏菜单,而不是在高度改变时隐藏菜单,这在我的例子中是有效的,因为我只需要在宽度改变时重写菜单。

mm5n2pyu

mm5n2pyu7#

这是Javascript resize event on scroll mobile的副本
为了修复它,使用onOrientationChange和window.orientation属性,参见相关答案:here

相关问题