Question

所以我的网站可以根据屏幕大小调整大小，但是当我实现Twitter小部件时，当我尝试调整大小时，尽管属性width:'auto'没有调整大小，但小部件仍然没有调整大小。这是小部件的代码：

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 2,
  interval: 30000,
  width: 'auto',
  height: 100,
  theme: {
    shell: {
      background: '#dbdbdb',
      color: '#000000'
    },
    tweets: {
      background: '#dbdbdb',
      color: '#000000',
      links: '#000000'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('jackstonedev').start();
</script>

这是小部件的CSS：

#twittercontainer
{
    border:3px solid;
    border-radius:20px;
    background-color:lightgrey;
    opacity:0.7;
    max-width:500px;
    margin: auto;
}

Answer 1

令人讨厌的是你不能用新的推特小部件来做这件事，旧的API将于2013年3月被分类，但我写了一些关于如何使用jquery使用新小部件来解决它的问题，虽然这是一种相当简单的方法： http://tappetyclick.com/blog/2012/12/20/how-dynamically-resize-new-twitter-widget

Answer 2

尝试使用％而不是自动调整大小。

如果父div然后重新调整你的小部件应该aswel，例如，如果你将你的小部件css设置为

#widget { width: 90%; }

如果父div为100像素宽，则窗口小部件的宽度为90像素。我希望这适合你。

可能还有一个问题是，如果通过生成的iFrame /或JS加载了twitter小部件，它可能会分配CSS值，这些可以覆盖您自己的设置值，因为它们是在加载页面时/之后设置的。尝试在HTML源代码中检查小部件本身，看看它发生了什么。

Answer 3

将小部件放入包装器并将宽度更改为宽度：'100％'，

它应该按预期工作。

Answer 4

我可以通过在样式表中添加以下代码，在我的Rails应用程序中将两个小部件的宽度更改为100％：

#twitter-widget-0, #twitter-widget-1 {

  float: none;
  width: 100% !important; 

}

Answer 5

我用过这个：

$('#twitter-widget-0').height($('#ID_SIMILAR HEIGHT').height());

根据屏幕大小调整Twitter小部件的大小

5 个答案: