jQuery 读取 window 宽度

Question

我正在尝试写一些 jQuery 如果 window 宽度低于 768px 则只有运行。我有以下代码

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

});

但是，无论浏览器加载为 <768 还是将浏览器大小调整为 <768，我都无法使其正常工作。

我做错了什么？仅当浏览器宽度小于 <768 时，如何才能让它识别 window 宽度和运行这个 jQuery？有没有更好的方法运行 jQuery 基于浏览器宽度？

示例 JS Fiddle：http://jsfiddle.net/franhaselden/jotq6hwf/

编辑：经过更多尝试后，我发现此代码确实运行但仅当浏览器主动调整大小时。如果以 <768 加载，则 jQuery 不会运行.

Answer 1

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

Answer 2

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

不需要jquery。

事件侦听器更新：

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
}

jQuery 读取 window 宽度

jQuery read window width

jquery

responsive-design