如何使用CSS代码替换新Twitter Widget中的100%宽度？
目前，我有几个Rails应用程序，在这些应用程序中，我通过媒体查询使用响应性web设计。我使用了以下CSS代码，将宽度覆盖到100%。
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
font-size: 12px;
}然而，我在2015年7月注意到Twitter小部件不再以100%的速度显示，而是以固定的大小显示。我查看了Twitter的开发人员网站，发现Twitter小部件的定制已经扩展。当我检查这个小部件时，我看到了CSS中的CSS参数，但我也看到了宽度设置为520 to。
https://dev.twitter.com/web/embedded-timelines
看看这个链接，我知道我可以用固定的宽度对代码中的参数进行编码。由于不知道任何人可以用来显示我的web应用程序的屏幕的大小，我不愿意在任何地方设置固定大小。另一个问题是，这不会改变它在我的媒体查询。
我找到的关于自定义当前Twitter小部件的唯一链接是下面这个链接。其中大部分是2011-2013年期间的。
这个问题是由在Wordpress中使用Twitter小部件的人提出的。该解决方案使用jQuery。我对Javascript不够精通，无法实现Javascript或jQuery解决方案，所以我不知道它是否适合我。
于2015年7月16日更新:格林尼治标准时间-5
我决定今天早上再做一次搜索，发现这个链接有三个最近的jQuery解决方案，这些人说他们已经开始工作了。
我在application.html.erb中添加了下面的行，以更正用于$的ReferenceError。我认为jquery创业板会识别我的代码。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>我创建了一个小提琴。当我点击JSHint时，它说我的代码是完全有效的。小部件的宽度为552 of。我不确定问题是否在我有代码的地方。我需要帮助来确定为什么我的jQuery代码没有实现我的目标。
下面是查看Twitter小部件时的iframe语句：
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="400">
.......widget statements.............
</iframe>回答 4
Stack Overflow用户
发布于 2015-07-23 06:23:01
基于克里斯的回答。这有一个间隔，用来检查iframe是否可以操作。如果是这样，则触发代码，然后清除间隔。
如果您有多个Twitter提要，请使用以下内容：
$(document).ready(function() {
twitterCheck = setInterval(function() {
if($('iframe[id^="twitter-widget-"]').length) {
$('iframe[id^="twitter-widget-"]').each(function () {
$(this).contents().find(".timeline").attr("style","max-width:100% !important;");
$(this).attr("style","max-width:100% !important; width: 100% !important;");
});
clearInterval(twitterCheck);
}
}, 1000);
});JSFiddle：http://jsfiddle.net/v7xom6ms/20/
或者，如果您有一个，您可以删除.each()并使用以下内容：
$(document).ready(function() {
twitterCheck = setInterval(function() {
var twitterFrame = $("#twitter-widget-0");
if(twitterFrame.length) {
twitterFrame.contents().find(".timeline").attr("style","max-width:100% !important;");
twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
clearInterval(twitterCheck);
}
}, 1000);
});JSFiddle：http://jsfiddle.net/v7xom6ms/21/
编辑:有人可能会说，上面的代码也很容易失败，因为iframe是加载的，但是您不能确认加载的内容。修起来容易。这也允许我们降低间隔，以进行不太明显的尺寸调整。
$(document).ready(function() {
twitterCheck = setInterval(function() {
var twitterFrame = $("#twitter-widget-0");
var twitterTimeline = twitterFrame.contents().find(".timeline");
if(twitterFrame.length && twitterTimeline.length) {
twitterTimeline.attr("style","max-width:100% !important;");
twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
clearInterval(twitterCheck);
}
}, 10);
});Stack Overflow用户
发布于 2015-07-22 19:18:20
您可以使用以下jQuery将iframe中div的内联样式作为目标：
$(document).ready(function() {
$("#twitter-widget-0").contents().find(".timeline").attr("style","max-width:100% !important;");
$("#twitter-widget-0").attr("style","max-width:100% !important; width: 100% !important;");})；
Stack Overflow用户
发布于 2015-08-12 09:50:33
在此解决：https://stackoverflow.com/a/31961647/2046152
这个解决方案对我有效。
基本上，您必须向twitter小部件iframe中注入一些css。
此示例使用jQuery
<style type="text/css" id="twitter-style">
.timeline { max-width: 100%; }
</style>
<script type="text/javascript">
twttr.widgets.createTimeline(
'WIDGET_ID_GO_HERE',
$('#widget-placeholder-go-here')[0],
{
chrome: 'nofooter noborders noheader' //optional
}
).then(function(el) {
$(el).contents().find('head').append($('#twitter-style'));
});
</script>https://stackoverflow.com/questions/31193357
复制相似问题
腾讯云开发者
