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

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

在我用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-,以上(包含)的都套用。
如果覺得這篇文章不錯,請幫我們讚一下!
Facebook
Google+
Telegram
E-mail
今晚有風

我是今晚有風,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您免寫程式的架站有興趣話的,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習,歡迎參考我的線上課程
  • 如果您想當部落客且想要自架站,我也能替您服務或顧問式輔導架站。
※你可能也喜歡 :
※推薦商品 :
有話想說嗎?

發表迴響

推薦閱讀 :
推薦閱讀 :
如果喜歡出國但又英文不好,尤其是自由行,那在溝通上該怎麼辦?…