Iframe 如何建立twitter'；s嵌入时间线宽度（百分比）（响应/流体设计）

我想建立一个，当你有一个固定的设计时，这是很容易的，但这不是我的情况，我实际上是在为一个新的网站建立一个流动性和响应性的设计

我的问题是，既然它是一个iframe，而你应该在你的twitter帐户中用px设置，我如何设置流体宽度

---

谢谢：）

你可以给你的iframe一个类，并尝试将CSS应用到它上。至少要将宽度更改为%

这是不可能的。可以使用“锚定”选项卡中的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>

!函数（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）；}（文档，“脚本”，“twitter wjs”）；

如果你必须做流体运动，你可以编写一个javascript代码，在调整大小事件后或者使用一些javascript定时器改变iframe的宽度

---

我们可以看看你的一些代码来制作一些js代码吗？

超级黑客，但你也可以这样做：

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

var checkTwitterResize=0；
函数resizeTwitterWidget（）{
如果（$（'#twitter-widget-0'）。长度>0）{
checkTwitterResize++；
如果（$（'#twitter-widget-0'）.attr（'width'）！='100%'）选中TwitterResize=0；
$（'twitter-widget-0'）.attr（'width'，'100%”）；
//确保至少检查10次（脚本在初始调整大小后运行）
如果（checkTwitterResize<10）设置超时（'resizeTwitterWidget（）'，50）；
}else setTimeout（'resizeTwitterWidget（）'，50）；
}
resizeTwitterWidget（）；

这似乎对我有用：

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

其中#twitter-widget-0是它生成的iframe，放置在一个适当样式的容器中。 它并不完美：小部件根据宽度和边距等产生的内容略有不同。调整大小后，其内容将不完全相同；但这似乎微不足道

---

我很好奇为什么简单的CSS对你不起作用-如果我遗漏了什么，我很抱歉。

多亏了你们大家，我找到了解决办法： 这几乎和拉克所说的一样，但我们必须关注iframe：

.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}

---

当然可以。我为包含框架的IV设计的类也是具有%宽度的流体

这是一个有用的线程，谢谢。我在一个网站上工作，该网站使用了一个较旧的Twitter个人资料小部件，我发现它更容易定制。因此，另一种方法是，使用它来显示提要（定制以适应）：

}

通过在兼容模式下使用IE9，然后使用F12开发人员工具查看html/css，可以查看要修改的各种类

---

希望这对别人有帮助

此逻辑将至少改变宽度和高度：

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

---

缩短高度的唯一问题是，它隐藏了供人们发送tweet的文本框，但确实缩短了高度。我的猜测是，如果你想添加其他CSS样式，你可以把！重要条款。我还假设，如果您有三个小部件，您可以定义#twitter-widget-2等。

属性选择器应该可以工作：

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

---

更多信息。

这可以使用，但您可能需要更改id末尾的数字。例如，我的id是

#twitter-widget-3

。您可能还需要

！重要信息

由于小部件iframe上有内联样式。2015年6月25日更新，twitter似乎再次更改了代码。这一次，他们设置了iframe内部小部件的最大宽度（即，在他们的网站生成的代码上）。因此，我无法针对iframe内部生成的CSS执行任何操作（因为跨域限制）

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

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