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

})