Question

我试图编写一些只在窗口宽度低于768px时运行的jQuery。我有以下代码

$(document).ready(function() {
    if($(window).width() <= 768){
       $("<p>Test</p>").insertBefore( "#menu-item-18 a" ); 
    }

});

但是，无论浏览器加载为＆lt; 768还是将浏览器调整为＆lt; 768，我都无法解决此问题。

我做错了什么？如果浏览器宽度小于＆lt; 768，我怎样才能识别窗口宽度并运行此jQuery？有没有更好的方法来根据浏览器宽度运行jQuery？

示例JS小提琴：http://jsfiddle.net/franhaselden/jotq6hwf/

编辑：玩了更多我发现这个代码确实运行但只有在浏览器被主动调整大小时才会运行。如果它在＆lt; 768处加载，则jQuery不会运行。

Answer 1

var w = window.innerWidth;
var h = window.innerHeight;

不需要jquery。

为eventlistener更新：

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        console.log('addEventListener - resize');
    }, true);
}
else {
    //The browser does not support Javascript event binding
}

Answer 2

$(function() {
    $(window).on('resize', function() {
        if($(window).width() >= 768){
           $("<p>Test</p>").insertBefore( "#menu-item-18 a" ); 
        }
    }).trigger('resize');
});

jQuery读取窗口宽度

2 个答案: