jQuery .ready/resize无法在iPad上运行

5uzkadbs  于 2023-02-08  发布在  jQuery
关注(0)|答案(7)|浏览(173)

为什么就绪/调整大小事件在iPad上不起作用?它们在计算机上起作用,但在iPad上不起作用。有人知道我做错了什么吗?

jQuery(document).on('ready', function() {
    jQuery(window).on('resize', function() {
        /* Tablet Portrait size to standard 960 (devices and browsers) */
        if (jQuery(window).width() < 960 && jQuery(window).width() > 768) {
           //change the attributes from the div #home_content (first parameter: the attribute, what it needs to be)
           jQuery('#home_content').attr('class','sixteen columns');
           jQuery('#slider').attr('class','sixteen columns');
        }
        else{
            jQuery('#home_content').attr('class','nine columns');
            jQuery('#slider').attr('class','nine columns');
        }

        /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        if(jQuery(window).width() < 767 && jQuery(window).width() > 480) {
            //code
        }
        else{

        }

        /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        if(jQuery(window).width() < 479) {
            //code
        }   
        else{

        }
    }).trigger('resize'); // Trigger resize handlers.       
});//ready
i86rm4rw

i86rm4rw1#

尝试jQuery(document).ready(function(){ alert('booya!') });
并在收到提示时将代码放入该函数中。还可以访问Chrome中的页面,通过在Developer Tools中打开内置控制台来检查Javascript错误。

laawzig2

laawzig22#

我找到了解决办法:我使用jQuery(document). width()而不是jQuery(window). width(),现在我的脚本有望在 * every * 设备上工作:)
谢谢你的回答!

sqxo8psd

sqxo8psd3#

它现在起作用了,
我的代码不起作用,因为我使用了window.width(),它在iPad上不起作用,我把它改成了document.width,现在它起作用了。:)

ars1skjm

ars1skjm4#

iPad以及其他一些触控设备不像桌面浏览器那样频繁地触发resize事件。这可能会导致代码无法按预期执行。要解决此问题,您可以尝试使用orientationchange事件而不是resize事件。在触控设备上,当设备方向更改时会触发此事件。
下面是更新后的代码:

jQuery(document).on('ready', function() {
    jQuery(window).on('orientationchange', function() {
        /* Tablet Portrait size to standard 960 (devices and browsers) */
        if (jQuery(window).width() < 960 && jQuery(window).width() > 768) {
           //change the attributes from the div #home_content (first parameter: the attribute, what it needs to be)
           jQuery('#home_content').attr('class','sixteen columns');
           jQuery('#slider').attr('class','sixteen columns');
        }
        else{
            jQuery('#home_content').attr('class','nine columns');
            jQuery('#slider').attr('class','nine columns');
        }

        /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        if(jQuery(window).width() < 767 && jQuery(window).width() > 480) {
            //code
        }
        else{

        }

        /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        if(jQuery(window).width() < 479) {
            //code
        }   
        else{

        }
    }).trigger('orientationchange'); // Trigger orientationchange handlers.       
});//ready
tktrz96b

tktrz96b5#

试试这个

// Checks to see if the platform is strictly equal to iPad:
if (navigator.platform === 'iPad') {
    window.onorientationchange = function() {

        var orientation = window.orientation;

        // Look at the value of window.orientation:
        if (orientation === 0) {
            // iPad is in Portrait mode.

        } else if (orientation === 90) {
            // iPad is in Landscape mode. The screen is turned to the left.

        } else if (orientation === -90) {
            // iPad is in Landscape mode. The screen is turned to the right.

        } else if (orientation === 180) {
            // Upside down portrait.

        }
    }
}​

希望这有帮助!

ql3eal8s

ql3eal8s6#

如果您尝试捕获iPad的方向,您应该用途:

window.onorientationchange = function(e) { /* your code */ };

而不是窗口调整大小事件。

gywdnpxw

gywdnpxw7#

请检查以下内容

$(window).resize(function() {

alert("Window size changed");

});

要访问高度和宽度,可以使用

$(window).width();

$(window).height();

相关问题