jQuery

Question

我正在开发一个包含 4 个 'pages' 视差滚动的网站，您可以通过按向上或向下按钮在其中滚动。

第一个 'page' 包含视频背景。此 'page' 无需在平板电脑和手机上显示。我可以使用媒体查询隐藏这个 'page'，但这会破坏视差滚动功能，因为此功能的脚本仍然会看到隐藏的 div.

所以为了不显示该页面，我认为最好的方法是完全删除 div。由于这不能通过媒体查询来完成，我正在寻找一种方法 jQuery 当屏幕宽度小于 1350px

时，通过 class 删除 div

任何想法将不胜感激！

Answer 1

由于您不想使用媒体查询，我假设您对动态行为也不感兴趣 - 我的意思是 show/append div 如果 window 宽度扩大.在这种情况下，您可以像这样简单地一次性删除：

if ($(window).width() < 1350) {
    $('.class-name').remove();
}

Answer 2

我的回答目前来自 Jquery 文档的第二个代码示例（见下文）：

var screenSizeLimit = 1350;

if( window.screen.width < screenSizeLimit ){
    $( ".yourDivClass" ).remove();
}

http://api.jquery.com/remove/

Answer 3

你应该使用 window.matchMedia:

$(function(){
    if (window.matchMedia("(max-width: 1350px)").matches) {
        $('div.myClass').remove();
    }
});

CanIUse

Polyfill

Answer 4

试试这个

<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>

(function($){
        $(window).load(function(){                
            var win =$(window);

            if(win.width()<1350)
            {             
                $( ".hello" ).remove();
            }
            else
            {
            }
        });

$(window).resize(function(){                
            var win =$(window);

            if(win.width()<1350)
            {             
                $( ".hello" ).remove();
            }
            else
            {
            }
        });
})(jQuery);

jQuery - 当屏幕小于 1350px 时，通过 class 删除 div

jQuery - remove div by class when the screen is smaller than 1350px

html

width