jQuery窗口调整大小在iOS上不起作用

时间:2011-09-06 19:29:34

标签: javascript ios orientation freeze

我正在处理的网站正在冻结方向更​​改,该网站属于调整大小功能。经过大量的重写后,它可以在插件外移动resize事件。这导致了其他不需要的行为,因此它并不理想。

知道为什么会被卡住吗?我所知道的其他插件,比如Supersized,在没有挂断的情况下以类似的方式运行doc ready,load和resize。所以我知道可能有一些关于我是如何写它的细节导致它。

请求你的帮助!

测试地点: http://brantley.dhut.ch/

JavaScript的:

插入 -

(function( $ ){
    $.fn.respond = function(callback) {

        /* initialize function on window load and resize */
        $(document).ready(function() {
            dimensions();
        });
        $(window).resize(function() {
            dimensions();
        });

        /* declare affected elements */
        var pic = this

        /* set image's height or width depending on the browser window's size */
        function dimensions() {
            return pic.each(function() {

            /* declare variables */
                var browserWidth = $(window).width();
                var imgRatio = $(this).width() / $(this).height()
                var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
                var browserRatio = browserWidth / availableHeight

                /* image sizing logic */
                if (browserRatio >= imgRatio) {
                    if (browserWidth > 640) {
                        /* if the browser is landscape and bigger than mobile, set the image's height to fill the available space */
                        $(this).height(availableHeight).width('auto');
                        //$('body').css('background', 'blue');
                    } else {
                        /* it's mobile */
                        $(this).width(browserWidth - 40).height('auto');
                        //$('body').css('background', 'red');
                    }
                } else {
                    /* if the browser is portrait, set the image's width to fill the page */
                    $(this).width(browserWidth - 40).height('auto');
                    //$('body').css('background', 'green');
                }

                /* horizontally center content */
                $(this).css('margin-left', (browserWidth - $(this).width())/2);

            });

        };
        callback();     
    };
})( jQuery );

执行 -

$(document).ready(function() {

    /* run respond and hide the main images */
    $('.z').respond(function() {
        $('.z').hide();
    });

});

0 个答案:

没有答案