Twitter嵌入时间线100%宽度

Question

我在这个页面上运行了一个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帐户来生成访问令牌等.

Answer 1

如上所述,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浏览器上工作.