用于 Twitter 小部件宽度的 HTML/CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12539496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS for Twitter widget width
提问by tariq
The code Twitter gives you to paste in the html looks like this:
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>
They allow you to set a height, which I set to 600. When placed on my site I get this (when viewing the source):
它们允许您设置高度，我将其设置为 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>
The 220 width is what is killing me. I want the width to be the full width of the container, which is 100% (for a mobile site). Currently the 220 width goes a little more than halfway across the page and displays an ugly scrollbar.
220 的宽度让我很伤心。我希望宽度是容器的全宽，即 100%（对于移动网站）。目前 220 宽度比页面的一半多一点，并显示一个丑陋的滚动条。
So, why is it setting the width to 220, and how can I get it to expand to it's parent width?
那么，为什么将宽度设置为 220，我该如何让它扩展到它的父宽度？
回答by djchete
I use a responsive theme and this css code works fine. Thanks Hjuster.
我使用响应式主题，此 css 代码运行良好。谢谢休斯特。
#twitter-widget-0 {
width: 100% !important;
}
回答by KInetic
Twitter allows you to adjust the width and height of the timeline widget via HTML width and height attributes BUT the minimum width they accept is 220 pixelsEXAMPLE: width="220", height="350"
Twitter的，您可以通过HTML宽度和高度属性，但最小宽度他们接受的是调整时间线窗口小部件的宽度和高度220 pixels实例：width="220"，height="350"
FROM Twitters developers page: The minimum width of a timeline is 220px and the maximum is 520px. The minimum height is 350px.
来自Twitters 开发者页面：时间线的最小宽度为 220 像素，最大为 520 像素。最小高度为 350px。
回答by adriano72
You can change the width of the widget by setting its value in the "twitter-timeline" class definition, as mentioned here:
您可以通过在“twitter-timeline”类定义中设置其值来更改小部件的宽度，如下所述：
https://dev.twitter.com/docs/embedded-timelines
https://dev.twitter.com/docs/embedded-timelines
For example a twitter timeline widget with width 280 and height 300 is something along the lines of:
例如，宽度为 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>
回答by Dom
#twitter-widget-6 {
width:600px;
}
The above works, I presume the numbers correspond with how many widgets you've created. Is the width the only thing we can change, what about fonts, I cant seems to change this? The Twitter widget is so ugly it's hard to make it sit nicely in any layout.
以上有效，我认为数字与您创建的小部件数量相对应。宽度是我们唯一可以改变的，字体呢，我似乎不能改变这个？Twitter 小部件非常丑陋，很难让它在任何布局中都能很好地放置。
回答by Kamran
If we place below CSS, then we can set the width of the widget according to the requirement.
如果我们放在CSS下面，那么我们可以根据需要设置widget的宽度。
<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style>
回答by Matt Sich
if you just use
如果你只是使用
#twitter-widget-0 {
width: 100% !important;
}
it will work but it will cut off on iOS devices (haven't tested on android). To fix this, you need to add width and height to the twitter-timeline tag like so:
它会工作，但它会在 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>
回答by user2245341
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 而不是 id #twitter-widget-0。这样，小部件会在渲染后调整大小。
.twitter-timeline-rendered {
width: 100% !important;
}
回答by Chandrakant
I have tried all above answers but no luck,
我已经尝试了以上所有答案，但没有运气，
So Implemented below code myself and worked for me
所以我自己实现了下面的代码并为我工作
<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>
回答by Simpa
Include
包括
data-width="100%"在锚标签中。这对我有用。
回答by Sébastien Barbieri
Here is how I did it, using almost the same logic than Chandrakantdid use to insert the style in the iframe.
这是我如何做到的，使用与Chandrakant在 iframe 中插入样式几乎相同的逻辑。
First of all: add twitter widget the proper way
首先：以正确的方式添加推特小部件
<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>
Now you have a nice window.twttr._e array which may contain everything that will run once twitter widget.js is loaded.
现在你有一个很好的 window.twttr._e 数组，它可能包含加载 twitter widget.js 后将运行的所有内容。
Note that I added js.async = true;
请注意，我添加了 js.async = true;
Now you may in the same script or afterward do:
现在您可以在同一个脚本中或之后执行以下操作：
<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>
Note that I used the jquery way to append the style at the end of the iframe head content. You can do it the classical way but it's longer.
请注意，我使用 jquery 方式在 iframe 头部内容的末尾附加样式。你可以用经典的方式来做，但时间更长。
<script type="text/javascript">
// ...
widget.contentDocument.getElementsByTagName('head')[0]...
// ...
</script>
