根據窗口大小刪除元素

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>