如何使Fb和Twitter小部件对所有设备都有响应?我尝试将iframe宽度设置为100%,但是当我在智能手机中查看它时,它会拉伸导致水平滚动条的布局。这也发生在youtube视频中。使Fb和Twitter小部件响应
回答
对于推特!我发现的最简单的解决方案是通过CSS。编辑.twtr-doc类的宽度为100%。
对于FB(假设你在说什么样箱),我改变了第一宽度为auto,第二个(内联CSS)至100% 我将使用可口可乐作为一个例子...
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcocacola&width=auto&height=395&colorscheme=light&show_faces=false&border_color&stream=true&header=false&appId=176993455739426" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:395px;" allowTransparency="true"></iframe>
汽车没有为我工作,我只是删除宽度参数。 – 2015-02-28 19:50:41
尝试:
#twitter-widget-0{
width: 100% !important;
}
这对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步恭喜,您现在有一个响应式的微件!如果他们发布新版本的小部件,只需重新制作我建议的步骤!
这解决了这个问题,但是你会使用一个自定义的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>
.twitter-tweet{
width: 100% !important;
}
使用类而不是ID#叽叽喳喳的小部件-0,因为如果你在你的网站上添加多个Twitter的饲料,它只选择第一鸣叫,并添加CSS它。
请问一个更具体的问题,并给出一个更清晰的例子,你想要做什么。 Stackoverflow是努力在=努力:) – Spider 2012-08-15 11:16:39