使Fb和Twitter小部件響應

如何使Fb和Twitter小部件對所有設備都有響應？我嘗試將iframe寬度設置爲100％，但是當我在智能手機中查看它時，它會拉伸導致水平滾動條的佈局。這也發生在youtube視頻中。使Fb和Twitter小部件響應

2012-08-05 logesh

請問一個更具體的問題，並給出一個更清晰的例子，你想要做什麼。 Stackoverflow是努力在=努力:) – Spider 2012-08-15 11:16:39

對於推特！我發現的最簡單的解決方案是通過CSS。編輯.twtr-doc類的寬度爲100％。

對於FB（假設你在說什麼樣箱），我改變了第一寬度爲auto，第二個（內聯CSS）至100％我將使用可口可樂作爲一個例子...

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcocacola&amp;width=auto&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false&amp;appId=176993455739426" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:395px;" allowTransparency="true"></iframe>

來源

2012-08-24 01:37:02

汽車沒有爲我工作，我只是刪除寬度參數。 – 2015-02-28 19:50:41

嘗試：

#twitter-widget-0{ 
    width: 100% !important; 
}

來源

2013-06-30 02:31:42

這對twitter很有效，媒體查詢可用於使其完全響應。 – Joseph 2014-01-23 03:38:23

對於Twitter的嘗試：

步驟1：下載Twitter的插件js文件，並把它放在「YOUR_LOCAL_PATH/JS」

步驟2：修改widget調用腳本，如下所示：！function（d，s，id）{var js，fjs = d.getElementsByTagName（s）[0]; （！d.getElementById（id））{js = d.createElement（s）; js.id = id; js.src =「YOUR_LOCAL_PATH/js/twitter.widgets.js」; fjs.parentNode.insertBefore（js ，FJS）;}}（文件，「腳本」，「推 - WJS」）; 你應該看到我已經刪除了「p」變量和協議聲明，並且指向Twitter的小部件js文件的本地副本。

第3步：使用類似 http://jsbeautifier.org/的內容使widgets.js文件內的代碼可讀。該副本碼內部後「YOUR_LOCAL_PATH/JS/twitter.widgets.js」

步驟4.1：查找和修改一樣，我建議如下：

dimensions: { DEFAULT_HEIGHT: "600", DEFAULT_WIDTH: "100", // modify this to be 100 - like 100% NARROW_WIDTH: "100", // modify this to be 100 - like 100% MIN_WIDTH: "100", // modify this to be 100 - like 100% MIN_HEIGHT: "200", WIDE_MEDIA_PADDING: 81, NARROW_MEDIA_PADDING: 16, WIDE_MEDIA_PADDING_CL: 60, NARROW_MEDIA_PADDING_CL: 12 },

步驟4.2：查找和修改就像我以下建議：從此：.frame.style.minWidth = s.dimensions.MIN_WIDTH +「px」至此 .frame.style.minWidth = s.dimensions.MIN_WIDTH +「％」

第5步恭喜，您現在有一個響應式的微件！如果他們發佈新版本的小部件，只需重新制作我建議的步驟！

來源

2013-08-21 12:36:55

這解決了這個問題，但是你會使用一個自定義的JS，所以如果Twitter改變了他們身邊的任何東西，你的實現可能會在未來破裂。 @Guiaemedica Gozum的答案適用於幾行CSS，這意味着媒體查詢可以用於完全響應。 – Joseph 2014-01-23 03:37:57

Twitter相當自己的反應。但縱橫比呢？它歸結爲與youtube vids相同的問題。兩者都是Iframe。

現在我應該讚揚一些人提出這個YouTube的，但我忘記了誰。抱歉。無論如何，它也被使用Tod Moto's Fluidvids.

所以這裏的訣竅。您將youtube或twitter部件的iframe放置在div（或任何塊元素）內。給它這些CSS值：

div { 
position: relative; 
padding-top: SEE BELOW 
width: 100%; }

然後將此到的Iframe：

div iframe { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; }

在看到下面應該寫你的縱橫比。您可以通過按高度分開寬度並乘以100％來計算此值。如果你還沒有發現，這在Sass中很容易。

我的html看起來像這樣，順便說一句。 twitter javascript文件不是內聯的，因爲我的Ajax小部件和內聯腳本不會在Ajaxed時運行。

<aside> 
    <div> 
     <a class="twitter-timeline" height="570" href="https://twitter.com/PartosNL" data-widget-id="520500579978596352">Tweets van @PartosNL</a> 
     <script src="<?php bloginfo('template_url');?>/js/twitter.js"></script> 
     <br class="clear"> 
    </div> 
</aside>

來源

2014-10-11 00:27:49

.twitter-tweet{ 
    width: 100% !important; 
}

使用類而不是ID＃嘰嘰喳喳的小部件-0，因爲如果你在你的網站上添加多個Twitter的飼料，它只選擇第一鳴叫，並添加CSS它。

來源

2015-06-04 07:27:54 Saajan

使Fb和Twitter小部件響應

回答

相關問題