3

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

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

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

该类.widescreen被添加到所有仅加载在大于 768px 的屏幕上的元素中

然后，如果用户调整浏览器窗口的大小（或将设备旋转 90°），我希望它能够工作，所以我尝试了这个：

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

哪个有效，但仅在调整窗口大小而不以较小尺寸加载时才有效。我猜这会发生。

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

然后，当然，诀窍是在窗口大小调整为超过 768 像素时重新添加内容！但是，如果第一部分实际上是可能的，我会尝试弄清楚！

4

3 回答 3

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

})
于 2011-12-21T14:35:35.143 回答
1

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

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

checkSize();

$(window).resize(function() {
    checkSize();
});
于 2011-12-21T14:37:38.553 回答
0

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

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

如果你想使用 JavaScript，那么这也是同样的事情；

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

我没有看到删除元素而不是仅仅隐藏它们的意义，因为在这两种情况下客户端仍然必须下载 HTML。

于 2011-12-21T15:19:46.570 回答