我有一个在 this page 上运行的 Twitter 嵌入式时间线。
通过 CSS，我添加了以下类：
.twitter-timeline {
min-width: 100% !important;
直到昨天，这个 CSS 成功地将时间线延伸到内容区域的整个宽度，但今天样式不起作用。
我可以看到 Twitter 在 iframe 中运行以下样式：
.timeline {
max-width: 520px;
我认为这是 Twitter 最近添加的内容。我能做些什么来覆盖它吗？我尝试将以下内容添加到我的 CSS 类中，但没有奏效：
.twitter-timeline {
min-width: 100% !important;
width: 100% !important;
我知道我可以利用 Twitter API 来创建自定义提要，但我们无权访问艺术家 Twitter 帐户来生成访问令牌等。
【问题讨论】：
如前所述，twitter 目前不允许其时间线小部件获得 100% 宽度。对于响应式网站来说，这很痛苦，但有一个解决方案（目前）。
在 twitter 嵌入脚本上使用回调并将其指向更改 iframe 样式的函数。
使用 Jquery 的解决方案
用这个替换你的 twitter 嵌入代码（在<a> 标签下）。
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {responsiveTwitterWidget()});");
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
function responsiveTwitterWidget(){
var widget = $("#twitter-widget-0");
var frame_style = widget.attr('style');
widget.attr('style', frame_style + ' max-width:none !important; width:100%');
if(widget) {
var head = widget.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>');
}
widget.append($('<div class=timeline>'));
}
}
</script>
如果页面上有多个时间线小部件，则需要进行调整。
可能无法在某些较旧的 IE 浏览器上运行。
【讨论】：
这对我有用。
CSS
iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}
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>'));
})
});
在上网寻找解决方案时发现了这个。
https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page
【讨论】：
简单有效：
$('.twitter-timeline').css({width: '100%'});
【讨论】：
我们最近发现 Twitter 的 publish.twitter.com 用于嵌入式配置文件时间线的相当新的代码生成器仍然会导致时间线溢出 iOS 设备的容器宽度的问题，特别是在宽度和高度设置时（并且没有数据推文-限制设置）。
已经尝试了上述所有 javascript 解决方案来保持容器的时间宽度=100%，但将时间线限制为不超过容器宽度，我们通过这个添加的 css 做到了这一点（选择器可能通过您的额外特异性，根据需要）：
.twitter-timeline {
width: 100vw !important;
}
请注意，您需要确保已设置视口，可能是这样（但要适合您的实现）：
<meta name="viewport" content="width=device-width, initial-scale=1">
还要注意旧的 shrink-to-fit=no hack 在现代 iOS 中似乎不再有任何影响
【讨论】：
你需要使用javascript。
这是一个使用 jQuery 的解决方案：
$("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none");
【讨论】：
.timeline 在外部托管在 Twitter iFrame 中。
$("iframe[id^='twitter-widget-']").load(function () { /* put the code here */ });
$(document).ready(function() { $("iframe[id^='twitter-widget-0']").load(function () { $("iframe[id^='twitter-widget-0']").contents().find(".timeline").css("max-width", "none"); }); });。仍然无法正常工作，并且控制台没有显示任何错误。也许 Twitter 已经限制了这样的更改？
您可以将外部 css 文件附加到 twitter iframe 中，在此示例中背景应变为浅蓝色。
<script type="text/javascript">
$(window).load(function () {
function changeWidget() {
var twFrame = $('iframe#twitter-widget-0');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('<link href="http://www.w3schools.com/css/mystyle.css" rel="stylesheet" type="text/css" media="all" />');
} else {
setTimeout(changeWidget, 1500);
}
}
changeWidget();
});
</script>
添加您自己的 css 位置，其中包含：
.timeline{
max-width: 100% !important;
}
【讨论】：
javascript
$(document).ready(function() {
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";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
$(".tweet").each(function() {
twttr.widgets.createTweet($(this).data("id"), $(this)[0], {cards: "hidden"}).then(function(el) {
$(el).contents().find('.EmbeddedTweet').css('max-width', '800px');
});
});
});
});
html
<div class="tweet" data-id="705128887810965504"></div>
【讨论】：
实际上它对我有用，只需从 <a class="tweeter-timeline" 中删除 data-width 和 data-height 属性
<div class="col-xs-12 col-md-2...">
<a class="twitter-timeline">...</a>
【讨论】：
您需要像这样手动闯入他们的 iFrame 并自己修改 CSS。
<body onload="onLoad()">
<script>
function onLoad() {
var twitter_iframe = document.getElementById('twitter-widget-0');
var twitter_document = twitter_iframe.contentDocument || twitter_iframe.contentWindow.document;
var twitter_timeline = twitter_document.getElementsByClassName("timeline-Widget")[0];
twitter_timeline.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
</script>
注意：显然，如果他们调整 JS，这可能会停止工作，但好消息是它不会破坏您的页面或任何东西，它只会回到没有 100% 宽度的状态。
我对此进行了更强大的攻击，因为 Twitter 提要有时会在 body 的 onLoad 被调用后加载。以下方法也适用于几乎所有情况：
function onLoad() {
resizeTwitterFeed();
setTimeout(function(){ resizeTwitterFeed(); }, 100);
setTimeout(function(){ resizeTwitterFeed(); }, 250);
setTimeout(function(){ resizeTwitterFeed(); }, 500);
setTimeout(function(){ resizeTwitterFeed(); }, 750);
setTimeout(function(){ resizeTwitterFeed(); }, 1000);
setTimeout(function(){ resizeTwitterFeed(); }, 2000);
setTimeout(function(){ resizeTwitterFeed(); }, 3000);
setTimeout(function(){ resizeTwitterFeed(); }, 5000);
setTimeout(function(){ resizeTwitterFeed(); }, 10000);
}
function resizeTwitterFeed() {
var twitter_iframe = document.getElementById('twitter-widget-0');
if (twitter_iframe) {
var twitter_document1 = twitter_iframe.contentDocument;
if (twitter_document1) {
var twitter_timeline1 = twitter_document1.getElementsByClassName("timeline-Widget")[0];
if (twitter_timeline1) {
twitter_timeline1.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
}
var twitter_document2 = twitter_iframe.contentWindow.document;
if (twitter_document2) {
var twitter_timeline2 = twitter_document2.getElementsByClassName("timeline-Widget")[0];
if (twitter_timeline2) {
twitter_timeline2.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
}
twitter_iframe.onload = function() {
resizeTwitterFeed();
return true;
}
}
}
【讨论】：