用于 Twitter 小部件宽度的 HTML/CSS答案

【问题标题】：HTML/CSS for Twitter widget width用于 Twitter 小部件宽度的 HTML/CSS
【发布时间】：2012-09-14 09:43:57
【问题描述】：

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，我怎样才能让它扩展到它的父宽度？

【问题讨论】：

标签： html css widget twitter

【解决方案1】：

我使用响应式主题，并且此 css 代码运行良好。谢谢 Hjuster。

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

【讨论】：

2015 年 6 月 25 日更新似乎 twitter 再次更改了代码。这次他们设置了 iframe INSIDE 小部件的最大宽度（即在从他们的网站生成的代码上）

【解决方案2】：

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

FROM Twitters developers page: 时间线的最小宽度为 220px，最大为 520px。最小高度为 350 像素。

【讨论】：

【解决方案3】：

您可以通过在“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>

【讨论】：

但这是否意味着它也会接受百分比而不是绝对宽度？
我尝试设置一个 % 值，例如 10%，但似乎没有按预期工作。任何包含百分比的值都会使其宽度变为大约 500 像素。

【解决方案4】：

#twitter-widget-6 {
  width:600px;
}

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

【讨论】：

【解决方案5】：

如果你只是使用

#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>

【讨论】：

这是更新高度的正确和当前方法。它必须在<a> 标签上才能工作。

【解决方案6】：

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

<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style>

【讨论】：

【解决方案7】：

我需要使用类 twitter-timeline-rendered 而不是 id #twitter-widget-0。这样，小部件在渲染后会调整大小。

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

【讨论】：

您是否以某种方式设置了初始链接或呈现的小部件的样式？

【解决方案8】：

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

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

<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>

【讨论】：

感谢您的帖子，它帮助了我。如果另一个查询被清除，我可以接受这一点。 $('#twitter-widget-0') 这里是 '0' 静态值，我想动态加载该值，因为我给了更多按钮，当他们点击更多时，项目将加载，但这种样式不适用于这些项目bcz 这是静态的。所以请给我建议。

【解决方案9】：

包括

data-width="100%"

在锚标签中。这对我有用。

【讨论】：

【解决方案10】：

尝试将width="220" 更改为width="100%"。

【讨论】：

是的，我很乐意。但那是 twitter 自动生成的代码。他们出于某种原因注入了 220 宽度。
对，但是一旦你得到它，你可以改变这个值，这是他们给你粘贴到页面中的代码。只需我们任何编辑器（例如记事本）即可编辑它
不，我帖子中的第一段代码是他们给你的——以
好的，我明白了。在我的脑海中，我不知道如何解决这个问题。最好等一下，看看您是否收到熟悉 API 的人的回复

【解决方案11】：

这对我有用...

    #twitter-widget-6{
      width:600px;
    }

【讨论】：

Twitter 默认有一个.timeline{max-width:520px; 最大宽度。所以 iframe 的宽度为 600 像素，但在 iframe 中，内容的宽度为 520 像素。通过直接在 iframe 中重载样式，您可以重新定义时间轴类，并且可以超越 520 像素的限制。

【解决方案12】：

这对我有用：

.twitter-timeline {
    height: 180px !important; 
    width: 100% !important; 
}

【讨论】：

【解决方案13】：

我是这样做的，使用与 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>

【讨论】：

【解决方案14】：

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

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

【讨论】：