jquery window.innerWidth删除和替换内容

Question

我正在建立一个响应式网站,但不想只隐藏较小屏幕的元素,我想完全删除它们以减少加载时间.

到目前为止,我已经完成了这项工作

if (window.innerWidth < 768) {
    $('.widescreen').remove();
}

该类.widescreen将添加到仅在宽度超过768px的屏幕上加载的所有元素

然后,如果用户调整浏览器窗口大小(或将设备旋转90°),我希望这可以工作,所以我尝试了这个:

$(window).resize(function() {
    //small-screen
    if (window.innerWidth < 768) {
        $('.widescreen').remove();
    }
    //end small-screen
});

哪个有效,但仅在调整窗口大小而未按较小尺寸加载时才有效.我猜想会发生这种情况.

有没有办法实现这一点,以便它在加载页面和调整浏览器窗口大小时都有效？

然后,当然,诀窍是在窗口调整大小超过768px时添加内容!但如果第一部分真的可能的话,我会试着想出那个!

Answer 1

$(function() {   
 $(window).resize(function() {
        //small-screen
        if (window.innerWidth < 768) {
            $('.widescreen').remove();
        }
        //end small-screen
    }) .resize(); // trigger resize event

})