7

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>

高さを設定できますが、私は 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>

220幅は私を殺しているものです. 幅をコンテナーの全幅、つまり 100% にしたい (モバイル サイトの場合)。現在、220 の幅はページの半分を少し超えており、醜いスクロールバーが表示されます。

では、なぜ幅を 220 に設定しているのでしょうか。また、親の幅に拡張するにはどうすればよいでしょうか。

4

14 に答える 14

19

レスポンシブ テーマを使用していますが、この CSS コードは正常に動作します。ありがとうHjuster。

#twitter-widget-0 { 
      width: 100% !important; 
    }
于 2012-10-04T07:44:23.107 に答える
11

Twitterでは、HTMLの幅と高さの属性を使用してタイムラインウィジェットの幅と高さを調整できますが、受け入れられる最小の幅は220 pixels例ですwidth="220"。height="350"

Twitterの開発者ページから：タイムラインの最小幅は220ピクセル、最大幅は520ピクセルです。最小の高さは350pxです。

于 2012-11-26T19:16:22.810 に答える
6

ここで説明するように、ウィジェットの幅を変更するには、「twitter-timeline」クラス定義でその値を設定します。

https://dev.twitter.com/docs/embedded-timelines

たとえば、幅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>

于 2012-10-07T08:46:07.733 に答える
2 
#twitter-widget-6 {
  width:600px;
}

上記は機能します。数字は、作成したウィジェットの数に対応していると思います。変更できるのは幅だけですか。フォントはどうですか。これは変更できないようです。Twitter ウィジェットは見栄えが悪いので、どのようなレイアウトにもうまく収まるようにするのは困難です。

于 2012-10-26T10:01:51.790 に答える
2

使うだけなら

#twitter-widget-0 { 
    width: 100% !important; 
}

動作しますが、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>
于 2015-02-14T18:09:06.233 に答える
2

CSS の下に配置すると、要件に応じてウィジェットの幅を設定できます。

<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style>
于 2013-11-12T06:33:48.247 に答える
1

上記のすべての回答を試しましたが、うまくいきませんでした。

だから自分でコードの下に実装し、私のために働いた

<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>
于 2016-01-26T18:35:17.517 に答える
0

に変更width="220"してみてくださいwidth="100%"。

于 2012-09-21T23:54:18.113 に答える
0

これは私のために働いた...

    #twitter-widget-6{
      width:600px;
    }
于 2012-10-02T16:12:42.130 に答える
0

これは私のために働く：

.twitter-timeline {
    height: 180px !important; 
    width: 100% !important; 
}
于 2015-08-13T02:51:06.733 に答える
0

Chandrakantが iframe にスタイルを挿入するために使用したのとほぼ同じロジックを使用して、私がそれを行った方法を次に示します。

まず第一に、Twitterウィジェットを適切な方法で追加します

<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>

これで、window.twttr._e 配列が作成されました。この配列には、twitter widget.js が読み込まれると実行されるすべてのものが含まれている可能性があります。

js.async = true; を追加したことに注意してください。

これで、同じスクリプトで、または後で実行できます。

<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>

jquery の方法を使用して、iframe ヘッド コンテンツの最後にスタイルを追加したことに注意してください。古典的な方法で行うこともできますが、時間がかかります。

<script type="text/javascript">
// ...
widget.contentDocument.getElementsByTagName('head')[0]...
// ...
</script>
于 2016-02-19T16:21:42.333 に答える
0

最近の更新 (または失敗) により、Twitter は、Twitter の設定でどのようなオプションが設定されているかに関係なく、ロード時にすべてのフィード ウィジェットに画像を自動的に表示するように強制しました。

現在、HTML ベースのサイト内で独自のウィジェット フィードを使用しており、画像の読み込みを無効にしたいと考えています。最初からやり直す必要はありませんが、画像を含まないカスタマイズ可能な html および js ベースの Twitter フィードがどこにあるのか、誰かにアドバイスしてもらえますか。

于 2016-03-07T02:09:39.080 に答える