MUKI AI Summary
Facebook 的 Page Plugin 預設不支援 RWD,可以在 CSS 中加入特定程式碼來實現。首先,隱藏 #fb-root 元素以防止 layout 變形。接著,設定 .fb_iframe_widget 及相關元素的寬度為 100% !important,以確保所有容器適應不同螢幕尺寸。
程式碼來源於 Stack Overflow,提供了如何讓 Facebook like box 具備響應式設計的解決方案。這樣的設定能讓社交小工具在不同裝置上顯示良好。...
Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果,如果希望小工具也可以用 RWD 效果的話,可以在 CSS 加入以下程式碼:
/* 讓 FB 的 Page Plugin 可以有 RWD 的效果 https://developers.facebook.com/docs/plugins/page-plugin */ /* 這個元素內嵌在 iframes 裡,有可能造成部分 layout 變形,所以請把它隱藏 */ #fb-root { display: none; } /* 讓所有容器的寬度都變成 100% */ .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }
語法來源:http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive
歡迎給我點鼓勵,讓我知道你來過 :)
那是2012年的文章了,新版的 plugin 已經支援 RWD 很久囉!很容易可以設成自動滿版~
你好,我自己實測新版是無法支援的唷,也沒辦法設定自動滿版,以上的語法效果也是我現在實際使用可以做到的。如果新版 plugin 可以支援,需要什麼設定也歡迎你一起分享唷 ^___^