使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小部件响应

回答

相关问题