Удалить элементы на основе размера окна

Question

Я хочу удалить элемент div только на мобильных устройствах (в зависимости от размера окна).

Элемент является рекламой и с помощью CSS (display: none) все еще регистрируется на мобильных устройствах, даже еслиобъявление не показывается (просто скрыто), и это создает поддельное впечатление.

Мои объявления вставляются через параметры темы Wordpress (где добавляется сам рекламный код).И из функции я получаю код на странице.

<div class="topad">
    <div class="adh" id="adbox"><?php echo get_option('amn_topad'); ?></div>
</div>

Возможно, у меня есть правильный код для этого, но он может быть расположен не в том месте.Я использовал в header.php (где находится div):

if ($(window).width() < 700) {
  $('.topad').remove();
}

и

$(document).ready(function () {
if ($(window).width() < 700) {
  $('.topad').remove();
}
});

Я также пытался создать custom.js с теми же кодами, что иbefore и добавьте в functions.php

function my_scripts_method() {
   wp_register_script('custom_script',
   get_template_directory_uri() . '/js/custom.js',
   array('jquery'),
   '1.0' );
  wp_enqueue_script('custom_script');
  }
add_action('wp_enqueue_scripts', 'my_scripts_method');

Я не знаю, возможно ли это, но более простым и эффективным способом было бы предотвратить появление div, вставив "if" непосредственно в элемент

<div class="adh" id="adbox"><?php if() {echo get_option('amn_topad');} ?></div>

Answer 1

Полное удаление элемента - это не тот путь, которым движется индустрия - вы, возможно, захотите сделать это до сих пор, но, пожалуйста, примите во внимание контраргументы:

• Элемент больше не будет отображатьсяесли размер экрана превышает пороговое значение
• Чтобы удалить элемент после того, как пользователь изменяет размеры ниже порогового значения, вы должны обнаружить это поведение с помощью JS, который усложняет код
• Элемент может бытьполезен для других частей вашего кода

Широко распространенный в отрасли способ изменения отображения в зависимости от ширины размера заключается в использовании медиазапросов .Вот небольшая демонстрация, чтобы показать / скрыть элементы в зависимости от размера экрана (более 700 пикселей) - измените размер окна, чтобы оно заработало!

@media (max-width: 700px) {
  /* mobile CSS: hide .desktop div */
  .desktop {
    display: none
  }
}
@media (min-width: 700px) {
  /* desktop CSS: hide .mobile div */
  .mobile {
    display: none
  }
}

<div class="mobile">
  I appear only on mobile devices! (screen width less than 700)
</div>
<div class="desktop">
  I appear only on desktop devices! (screen width over 700)
</div>