Question

如何让Fb和Twitter小部件在所有设备上响应？我试图将iframe宽度设置为100％但是当我在智能手机中查看时，它会延伸布局，从而导致水平滚动条。这也适用于youtube视频。

Answer 1

尝试：

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

Answer 2

对于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&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>

Answer 3

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%; }

在SEE BELOW，您应该写下您的宽高比。您可以通过以高度分隔宽度并乘以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>

Answer 4

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

使用class而不是id＃twitter-widget-0因为如果你在网站上添加了多个twitter feed，它只选择第一条推文并为其添加css。

Answer 5

对于Twitter试试：

第1步：下载Twitter的widget js文件并将其放入“YOUR_LOCAL_PATH / js”

<小时/> 第2步：修改小部件调用脚本如下：！function（d，s，id）{var js，fjs = d.getElementsByTagName（s）[0]; 如果{JS = d.createElement（S）（d.getElementById（ID）！）; js.id = ID; js.src = “YOUR_LOCAL_PATH / JS / twitter.widgets.js”; fjs.parentNode.insertBefore（JS， FJS）;}}（文件， “脚本”， “推 - WJS”）; 你应该看到我删除了“p”变量和协议声明，我指向Twitter的widget 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步。恭喜，您现在拥有响应式推特小部件！如果他们发布了新版本的小部件，只需重新制作我建议的步骤！

使Fb和twitter小部件响应

5 个答案: