我在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创建自定义Feed，但我们无法访问艺术家Twitter帐户来生成访问令牌等。
如上所述，twitter目前不允许其时间轴小部件获得100％的宽度。对于响应式站点，这是一个痛苦，但有一个解决方案（目前）。
在twitter embed脚本上使用回调并将其指向一个改变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">
另请注意，现在的iOS中，旧的收缩适应=无黑客似乎不再有任何影响
你需要使用javascript。
这是jQuery的解决方案：
$("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none");
您可以将外部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>
实际上它对我有用，只需从data-width中删除data-height和<a class="tweeter-timeline"属性
<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％的宽度。
我对此进行了更强有力的攻击，因为在调用body的onLoad之后有时会加载twitter feed。以下方法几乎适用于所有情况：
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;
}
}
}