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检测到此行为，这会使代码复杂化
该元素可能对代码的其他部分有用

业界广泛采用的根据尺寸宽度更改显示的方法是使用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>

根据窗口大小删除元素

1 个答案: