resize

window.resize在移动端浏览器会被多次触发的问题。
2016年12月29日 admin未分类
为了能让气泡图和圆环图适配pad端的横竖屏，在c3里加了window.onresize事件。虽说解决了横竖屏的显示问题，但是又引来了一个问题，当滑动屏幕的时候（有滚动条）图形会闪，换句话说，他会不断触发resize事件。这究竟是怎么回事呢？

查阅MDN，是这样说的

后面还有一句备注：在窗口大小改变之后，就会触发resize事件。

在MSDN上的说法是：

大概的意思是：即使文档或CSS（层叠样式表）属性值更改，onresize事件也会触发带有布局的块和内联对象。 当设置诸如高度和宽度属性的测量时，或当设置对象的位置时，对象具有布局。 内部对象（如按钮）和窗口化对象（如窗口和iframe）按预期启动。 嵌入控件的文件不会触发此事件。

ie9开始有这个事件的，只能说ie更变态，哪怕一个属性改变也会触发onresize事件。所以，在兼容ie的时候要慎重。

回到我们的话题，在移动端滑动屏幕的时候并没有旋转屏幕，哪来的窗口大小改变呢？

所以就拿手机做个测试，页面刚加载的时候先计算一下$(window).height()；如图：

当页面滚动的时候再看此时的窗口高度。如图所示：

为什么窗口大小变了呢，我并没有对其做任何的旋转或缩放操作啊。会不会是有滚动条的原因？干脆把高度设置为没有滚动条的情况，此时再去测试并不会触发resize事件。经过仔细查看发现，当有滚动条的时候，滑到一定的范围，浏览器会自动隐藏地址栏，此时窗口的高度就发生了改变。所以上下滑动屏幕会不断触发resize事件。

既然发现问题所在了，解决方案呢？经测试有两种：

1、将移动端页面配置meta设置全屏显示。但是这样的问题是，我只是单纯地一个移动端网页，而不是APP里的网页。全屏后，用户会不知道如何退出全屏，增加操作成本，所以放弃。

2、重新定义resize事件：

jQuery(document).ready(function($) {

    // Store the window width
    var windowWidth = $(window).width();

    // Resize Event
    $(window).resize(function(){

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($(window).width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $(window).width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});

这个方法的地址：

[http://stackoverflow.com/questions/8898412/iphone-ipad-triggering-unexpected-resize-events]

经过测试还是第二种方法好使。第一种方法权当是学习一下如何设置移动端页面全屏了（移动端的safari和chrome按照官网的设置，木有成功。。。。）