jquery window.innerWidth删除和替换内容

我正在构建一个响应迅速的站点，但我不想只为较小的屏幕隐藏元素，我想完全删除它们以减少加载时间

到目前为止，我一直在努力

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

只有在调整窗口大小而不是加载较小大小的窗口时，此选项才起作用。我猜会发生的

是否有一种方法可以实现这一点，以便在加载页面和调整浏览器窗口大小时都能正常工作

然后，当然，诀窍是当窗口的大小调整到大于768px时，将内容添加回！但是如果第一部分真的有可能的话，我会努力找出答案

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

})

$（窗口）。调整大小（函数（）{
//小屏幕
如果（窗内宽度<768）{
$（'.widescreen'）.remove（）；
}
//端部小屏幕
}).resize（）；//触发调整大小事件
})

为什么不将检查大小的代码放在函数上，在加载和调整大小时调用此函数

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

checkSize();

$(window).resize(function() {
    checkSize();
});

函数checkSize（）{
//小屏幕
如果（窗内宽度<768）{
$（'.widescreen'）.remove（）；
}
//端部小屏幕
}
checkSize（）；
$（窗口）。调整大小（函数（）{
checkSize（）；
});

我会使用媒体查询来隐藏这些部分

@media all and (max-width: 768px) {
  .widescreen { display: none; }
}

如果你想使用JavaScript，那么它也可以做同样的事情

$(function() {   
 $(window).resize(function() {
     $('.widescreen').toggle( window.innerWidth >= 768 )
  }) .resize();
});

---

我不认为删除元素而不是隐藏它们有什么意义，因为在这两种情况下，客户端仍然需要下载HTML。

这非常有效，谢谢！如果我将其放在页面的头部，我是否正确地假设它将在元素加载之前删除元素–JU希望确保移动设备上的加载时间和页面大小保持在绝对最小值。如果您将该代码的功能设置为

ready

事件（document.ready（fn）或$（fn））-就像在我的解决方案中一样，加载文档时会触发功能是的，我正在尝试确保没有为小型设备加载内容，甚至不确定这是否可行…这只能在服务器端完成，然后再将响应（内容）发送到客户端。问题是不可能（很难）知道服务器端的屏幕分辨率/窗口大小。可以检测移动设备，然后修改内容或重定向到移动站点，但这似乎不是你想要的。谢谢，这有助于澄清问题。我可能会研究在超过一定宽度时动态加载内容。这可能是解决问题的一种方法，但不建议在倾斜时切换内容。我现在回答你的问题了吗？：）你解决了吗？没有，我只是用媒体查询来隐藏内容。不太理想，但可能在稍后阶段，有人会想出一个好方法，不加载基于媒体查询的内容。我现在正在使用@abuduba的

$（window）添加/删除类。出于另一个目的，请调整下面的
方法的大小。
$(function() {   
 $(window).resize(function() {
     $('.widescreen').toggle( window.innerWidth >= 768 )
  }) .resize();
});