7

Twitter 提供给您粘贴到 html 中的代码如下所示：

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

它们允许您设置一个高度，我将其设置为 600。当放置在我的网站上时，我得到了这个（查看源代码时）：

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe>

220 的宽度让我很生气。我希望宽度是容器的全宽，即 100%（对于移动网站）。目前 220 宽度在页面的一半多一点，并显示一个丑陋的滚动条。

那么，为什么将宽度设置为 220，我怎样才能让它扩展到它的父宽度？

4

14 回答 14

19

我使用响应式主题，这个 css 代码工作正常。谢谢胡斯特。

#twitter-widget-0 { 
      width: 100% !important; 
    }
于 2012-10-04T07:44:23.107 回答
11

Twitter 允许您通过 HTML 宽度和高度属性调整时间线小部件的宽度和高度，但它们接受的最小宽度是220 pixels示例：width="220"，height="350"

FROM Twitters 开发者页面：时间线的最小宽度为 220 像素，最大为 520 像素。最小高度为 350px。

于 2012-11-26T19:16:22.810 回答
6

您可以通过在“twitter-timeline”类定义中设置其值来更改小部件的宽度，如下所述：

https://dev.twitter.com/docs/embedded-timelines

例如，宽度为 280、高度为 300 的 twitter 时间线小部件类似于：

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

于 2012-10-07T08:46:07.733 回答
2 
#twitter-widget-6 {
  width:600px;
}

以上工作，我认为这些数字与您创建的小部件的数量相对应。宽度是我们唯一可以改变的吗，字体呢，我似乎不能改变这个？Twitter 小部件太丑了，很难让它在任何布局中都很好地放置。

于 2012-10-26T10:01:51.790 回答
2

如果你只是使用

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

它会工作，但它会在 iOS 设备上被切断（尚未在 android 上测试）。要解决此问题，您需要向 twitter-timeline 标签添加宽度和高度，如下所示：

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a>
于 2015-02-14T18:09:06.233 回答
2

如果我们放在CSS下面，那么我们可以根据需要设置widget的宽度。

<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style>
于 2013-11-12T06:33:48.247 回答
1

I needed to use the class twitter-timeline-rendered instead of the id #twitter-widget-0. That way, the widget is resized after rendering.

.twitter-timeline-rendered { 
      width: 100% !important; 
    }
于 2013-04-04T14:29:36.567 回答
1

包括

数据宽度=“100%”
在锚标签中。这对我有用。

于 2016-05-25T19:11:06.110 回答
1

我已经尝试了以上所有答案，但没有运气，

所以我自己在下面的代码中实现并为我工作

<script type="text/javascript">

 $(window).on('load', function () {

 $('iframe[id^=twitter-widget-]').each(function () {

 var head = $(this).contents().find('head');

 if (head.length) {

 head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');

 }

 $('#twitter-widget-0').append($('<div class=timeline>'));

 })

 });

</script>
于 2016-01-26T18:35:17.517 回答
0

这对我有用...

    #twitter-widget-6{
      width:600px;
    }
于 2012-10-02T16:12:42.130 回答
0

尝试更改width="220"为width="100%".

于 2012-09-21T23:54:18.113 回答
0

这就是我的做法，使用与Chandrakant在 iframe 中插入样式几乎相同的逻辑。

首先：以正确的方式添加 twitter 小部件

<script type="text/javascript">
// https://dev.twitter.com/web/javascript/loading
window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    js.async = true;
    fjs.parentNode.insertBefore(js, fjs);
    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
    };
    return t;
}(document, "script", "twitter-wjs"));
</script>

现在你有一个不错的 window.twttr._e 数组，它可能包含加载 twitter widget.js 后将运行的所有内容。

请注意，我添加了 js.async = true;

现在您可以在同一个脚本中或之后执行以下操作：

<script type=text/javascript">
// https://dev.twitter.com/web/javascript/events
window.twttr.events.bind('loaded', function (e) {
  e.widgets.forEach(function (widget) {
    // js to support twitter 100% if present
    $(widget).contents().find('head').append('<style>.timeline { max-width: 100% !important; width: 100% !important; }</style>');
  });
});
</script>

请注意，我使用 jquery 的方式将样式附加到 iframe 头部内容的末尾。你可以用经典的方式来做，但它会更长。

<script type="text/javascript">
// ...
widget.contentDocument.getElementsByTagName('head')[0]...
// ...
</script>
于 2016-02-19T16:21:42.333 回答
0

随着最近的更新（或搞砸），无论在 twitter 设置中设置了哪些选项，twitter 都强制所有提要小部件在加载时自动显示图像。

现在我在基于 html 的站点中使用他们自己的小部件提要，并希望禁用图像加载。我不介意必须重新开始，但是谁能告诉我在哪里可以找到不包含图像的可定制的基于 html 和 js 的 twitter 提要。

于 2016-03-07T02:09:39.080 回答
0

这对我有用：

.twitter-timeline {
    height: 180px !important; 
    width: 100% !important; 
}
于 2015-08-13T02:51:06.733 回答