根据窗口大小删除元素

Question

我只想删除移动设备上的div元素（基于窗口大小）。

元素是广告，即使广告没有显示（只是隐藏），使用CSS（显示：无）仍在移动设备上注册，这给人的印象是假的。

我的广告是通过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检测此行为，这会使代码复杂化
• 该元素可能对代码的其他部分很有用

在行业中广泛采用的根据尺寸宽度更改显示的方法是使用媒体查询 。 这是一个基于屏幕大小（大于或小于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>