javascript - 根据窗口大小删除元素

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，并将其添加到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');

我不知道是否可能，但更简单有效的方法是通过直接在元素中插入“if”来防止 div 出现

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

Answer 1

完全删除该元素并不是行业发展的方向 - 您可能仍然想这样做，但请考虑反驳观点:

• 如果屏幕大小调整超过阈值，该元素将不会重新显示
• 要在用户将大小调整到阈值以下后删除元素，您必须使用 JS 检测此行为，这会使代码变得复杂
• 该元素可能对代码的其他部分有用

业界广泛采用的根据尺寸宽度改变显示的方式是使用 media queries 。这是一个根据屏幕尺寸(大于或小于 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>