Как отображать тег DIV только на настольных устройствах (ширина> 1024)

Question

Как отображать тег DIV только на настольных устройствах (ширина> 1024 пикселей)

Я не хочу использовать CSS display: none, потому что элементы все еще загружаются при использовании CSS

Можно сделать с помощью javascript для рендеринга тега DIV на настольных устройствах

<div class="desktop">

    <h1> Test </h1>
    <p> Hello World this content load only for desktop devices </p>
    <img src="test.png" width="100" height="100">

</div>

Answer 1

Сделать:

<script>
    var screen_width = screen.width;
    if(screen_width<1024){
        document.querySelector(".desktop").remove();
    }
</script>