3

如何让 Fb 和 Twitter 小部件在所有设备上都能响应？我尝试将 iframe 宽度设置为 100%，但是当我在智能手机中查看它时，它会拉伸导致水平滚动条的布局。这也发生在 youtube 视频上。

4

5 回答 5

7

尝试：

#twitter-widget-0{
   width: 100% !important;  
}
于 2013-06-30T02:31:42.443 回答
6

对于推特！我找到的最简单的解决方案是通过 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-24T01:37:02.563 回答
1

Twitter对它自己的反应相当敏感。但是纵横比呢？它归结为与 youtube 视频相同的问题。两者都是 iframe。

现在我应该感谢一些人为 youtube 提出了这个，但我忘记了是谁。对不起。无论如何，Tod Moto 的 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-11T00:27:49.950 回答
1 
.twitter-tweet{
   width: 100% !important;  
}

使用 class 而不是 id #twitter-widget-0 因为如果您在您的网站中添加多个 twitter 提要，它只会选择第一条推文并将 css 添加到其中。

于 2015-06-04T07:27:54.170 回答
0

对于推特尝试：

第一步：下载 Twitter 的小部件 js 文件并将其放入“YOUR_LOCAL_PATH/js”

第 2 步：修改小部件调用脚本如下：!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="YOUR_LOCAL_PATH/js/twitter.widgets.js";fjs.parentNode.insertBefore(js, fjs);}}(文档,"脚本","twitter-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 步。恭喜，您现在拥有一个响应式 Twitter 小部件！如果他们发布了新版本的小部件，只需重新制作我建议的步骤！

于 2013-08-21T12:36:55.683 回答