如何以百分比设置twitter的嵌入式时间轴宽度(响应/流畅设计)

时间:2012-09-09 19:07:52

标签: iframe twitter responsive-design timeline fluid-layout

我正在设置twitter's embedded timeline,当你有一个固定的设计时,它很容易,但这不是我的情况,我实际上正在为一个新网站构建一个流畅的响应式设计。 / p>

我的问题是,如何设置twitter's embedded timeline具有流畅的宽度,因为它是一个iframe,你应该在你的推特账号中设置px中的with?

谢谢:)

9 个答案:

答案 0 :(得分:13)

这似乎对我有用:

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

其中#twitter-widget-0是它生成的iframe,放在适当样式的容器中。 它并不完美:小部件根据宽度生成其内容有点不同,并且在调整大小后边距等不会完全相同;但这似乎很小。

我很好奇为什么简单的CSS不适合你 - 抱歉,如果我错过了什么。

答案 1 :(得分:5)

感谢大家,我找到了自己的方式: 这几乎就像缺乏说的那样,但我们不得不专注于iframe:

.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}

当然.MyClassForTheDivThatContainTheiFrame也是流畅的%宽度

答案 2 :(得分:5)

此逻辑至少可以改变宽度和高度:

#twitter-widget-0, #twitter-widget-1 {
  float: none; 
  width: 100% !important;  
  height: 250px !important;
}

缩短高度的唯一问题是它隐藏了人们发送推文的文本框,但确实缩短了高度。我的猜测是,如果你想添加其他CSS样式,你可以放置!important子句。我还假设如果你有三个小部件,你可以定义#twitter-widget-2等。

答案 3 :(得分:1)

超级hacky,但你也可以这样做:

    <script type="text/javascript">
        var checkTwitterResize = 0;
        function resizeTwitterWidget() {
            if ($('#twitter-widget-0').length > 0) {
                checkTwitterResize++;
                if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
                $('#twitter-widget-0').attr('width', '100%');
                // Ensures it's checked at least 10 times (script runs after initial resize)
                if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
            } else setTimeout('resizeTwitterWidget()', 50);
        }
        resizeTwitterWidget();
    </script>

答案 4 :(得分:1)

这是一个有用的主题,谢谢。我正在使用较旧的Twitter配置文件Widget的网站上工作,我发现它更容易定制。因此,另一种方法是使用它来显示Feed(自定义以适应):

<script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 6000,
      width: 300,
      height: 400,
      theme: {
        shell: {
          background: 'transparent',
          color: '#151515'
        },
        tweets: {
          background: 'transparent',
          color: '#151515',
          links: '#007dba'
        }
      },
      features: {
        shell: false,
        scrollbar: true,
        loop: false,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        behavior: 'all'
      }
    }).render().setUser('BlueLevel').start();
</script>

然后通过将其添加到样式表来覆盖宽度:

.twtr-doc {
width:100% !important;

}

您可以在兼容模式下使用IE9查看要修改的各种类,然后使用F12 Developer Tools查看html / css。

希望能帮助别人!

答案 5 :(得分:0)

您可以为iframe提供一个类,并尝试将CS​​S应用于它。至少要将宽度更改为%。

答案 6 :(得分:0)

这是不可能的。您可以使用锚点选项卡中的html宽度和高度设置精确的宽度和高度。除此之外,你运气不好。没有响应能力或流动能力。

它的最小宽度为220px,最大宽度为520px。

<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by @vertmob</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>

答案 7 :(得分:0)

如果你绝对必须做一个流畅的,你可以编写一个javascript,在调整大小事件或使用一些javascript计时器后改变iframe的宽度。

我们可以看到你的一些代码为此制作一些js代码吗?

答案 8 :(得分:0)

属性选择器应该起作用:

iframe[id*="twitter-widget"] {
  width: 100%;
}

更多here