CSS筆記-在手機上自動隱藏or依視窗寬度自動隱藏

在我用WordPress來寫部落格時,在文章區中難免會置入2~4則廣告,可是若用手機來看此文章時又不想讓廣告出現這麼多以讓讀者閱讀體驗不佳,該怎麼辦?
我想到如果可以手動加上一段小小CSS語法(不須用到javacript),讓部分廣告在手機上不顯示,那就達成我的目的了。

這方法也能運用成「在電腦上顯示A圖,在手機顯示B圖」,
而此方法不限定一定要WordPress,任何一種部落格或網頁,你都能自己加入以下的語法,
那該怎麼做呢?

先自訂2段CSS

  • 隨意命名一個屬性叫「hide-in-phone」並讓它預設是一開始就隱藏;
  • 我設定螢幕寬480px就打開。

用div加上自訂的CSS屬性

  • 把要控制的內容用一個div包起來並套上剛剛上面設的class屬性。

→語法合併整理如下,
以下這段照抄即可,可以視情況修改寬度的數字。

/***自訂2段CSS***/
/* 自訂1-先預設是隱藏*/
.hide-in-phone{display:none}
/* 自訂2-若寬度大於480px就顯示*/
@media only screen and (min-width:480px) {
      .hide-in-phone { display: block; }
    }
<!--內容區加上這個css屬性-->
<div class="hide-in-phone">
/* 不顯示在手機,只顯示在PC或平板(480px以上)的內容*/
</div>


呈現結果如下:
▼在電腦或平板上會呈現2個廣告

▼在手機上會不顯示另一個廣告

這樣用手機讀文章的人就不會一進入網頁時,手機就被2個廣告擋住主視線,減少體驗不佳而離開此頁。
以上是參考這兩位網友的文章後直接簡潔整理如上面這一段語法。

如果是使用WordPress,可以配合此自訂CSS外掛:


後來網友也有提供一段若要寫在佈景主題中的程式碼供參考,我不懂得怎麼改php程式碼,但先記錄在此:

<?php if (wp_is_mobile()) { ?>
手機版顯示的內容
<?php } ?>—————- 或 —————<?php if (! wp_is_mobile()) { ?>
電腦版顯示的內容
<?php } else if (wp_is_mobile()) { ?>
手機版顯示的內容
<?php } ?>

另一位梅問題大大也提供另一段CSS語法更簡潔供參考:

@media(max-width:480px){
.hide-in-mobile{display:none;}
}


釋義:

  • max-,以下(包含)的都套用。
  • min-,以上(包含)的都套用。
FACY

我是小訣行銷工作室的Facy,這是我第二個網站專寫用來寫文章的,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
專長是WordPress客製化架站,且凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您不用寫程式就能架站有興趣的話,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習WordPress,歡迎參考我的線上課程或報名一對一家教班,或公開班(不定時配合開課單位開課)。
  • 如果您想當部落客且想要自架部落格網站且有自己網址,我也能替您服務或顧問式輔導架站
  • 架設網站請找我,點此看作品

在〈CSS筆記-在手機上自動隱藏or依視窗寬度自動隱藏〉中有 2 則留言

    • 上面的做法就可以達成了啊,如果你是wordpress網站,另可以直接在頁面編輯器中做,更快。

      回覆

發佈留言

如果您想收到新文章的通知,可以留下您的Email

我保證不會亂寄廣告信給你!

站內搜尋

訂閱本站

如果您想收到新文章的通知,可以留下您的Email

我保證不會亂寄廣告信給你!

小訣行銷工作室

如果需要架站(包含像本站類型部落格網站)、網頁設計教學服務、業配需求,歡迎參考小訣行銷工作室

贊助與鼓勵

您好,

如果我的網路筆記剛好有幫到您,不妨請我喝杯咖啡吧!😊