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

1 Star2 Stars3 Stars4 Stars5 Stars (本文對您有幫助嗎?)
Loading...

在我用WordPress來寫部落格時,在文章區中難免會置入2~4則廣告,可是若用手機來看此文章時又不想讓廣告出現這麼多以讓讀者閱讀體驗不佳,該怎麼辦?

我想到如果可以手動加上一段小小CSS語法(不須用到javacript),讓部分廣告在手機上不顯示,那就達成我的目的了。

此方法不限定一定要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-,以上(包含)的都套用。

如果您喜歡這篇文章,請幫我們按個讚!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *