7

Twitterの埋め込みタイムラインを設定したいと思っています。デザインが固定されている場合は非常に簡単ですが、それは私の場合ではなく、実際には新しいWebサイト用に流動的でレスポンシブなデザインを構築しています。

私の質問は、Twitterの埋め込みタイムラインをiframeであるため、流動的な幅で設定するにはどうすればよいですか？Twitterアカウントでwith inpxを設定することになっていますか？

ありがとう ：）

4

9 に答える 9

13

これは私にとってはうまくいくようです：

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

ここで、＃twitter-widget-0は、適切なスタイルのコンテナーに配置された、生成されるiframeです。完璧ではありません。ウィジェットは幅に応じてコンテンツの生成方法が少し異なり、サイズ変更後のマージンなどはまったく同じにはなりません。しかし、これはマイナーなようです。

単純なCSSが機能しなかった理由について知りたいのですが、何かが足りない場合は申し訳ありません。

于 2012-11-18T21:13:21.933 に答える
5

このロジックは、少なくとも幅と高さを変更するために機能します。

#twitter-widget-0, #twitter-widget-1 {
  float: none; 
  width: 100% !important;  
  height: 250px !important;
}

高さを短くすることの唯一の問題は、人々がツイートを送信するためのテキストボックスを非表示にすることですが、高さを短くします。私の推測では、他のCSSスタイルを追加したい場合は、！important句を置くだけです。また、ウィジェットが3つある場合は、＃twitter-widget-2などを定義すると思います。

于 2013-02-22T15:39:51.727 に答える
5

皆さんのおかげで、私は自分の道を見つけました。それはほとんど言われていないことでしたが、代わりにiframeに焦点を当てる必要がありました。

.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}

もちろん、.MyClassForTheDivThatContainTheiFrameも％幅の流動的です

于 2013-01-15T11:39:52.570 に答える
1

スーパーハッキーですが、これを行うこともできます：

    <script type="text/javascript">
        var checkTwitterResize = 0;
        function resizeTwitterWidget() {
            if ($('#twitter-widget-0').length > 0) {
                checkTwitterResize++;
                if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
                $('#twitter-widget-0').attr('width', '100%');
                // Ensures it's checked at least 10 times (script runs after initial resize)
                if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
            } else setTimeout('resizeTwitterWidget()', 50);
        }
        resizeTwitterWidget();
    </script>
于 2012-09-25T22:42:02.743 に答える
1

これは有益なスレッドでした、ありがとう。カスタマイズしやすい古いTwitterプロファイルウィジェットを使用しているサイトで作業しています。したがって、別の方法では、これを使用してフィードを表示します（適切にカスタマイズ）。

<script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 6000,
      width: 300,
      height: 400,
      theme: {
        shell: {
          background: 'transparent',
          color: '#151515'
        },
        tweets: {
          background: 'transparent',
          color: '#151515',
          links: '#007dba'
        }
      },
      features: {
        shell: false,
        scrollbar: true,
        loop: false,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        behavior: 'all'
      }
    }).render().setUser('BlueLevel').start();
</script>

次に、これをスタイルシートに追加して幅をオーバーライドします。

.twtr-doc {
width:100% !important;

}

互換モードでIE9を使用し、次にF12開発者ツールを使用してhtml / cssを表示することにより、変更するさまざまなクラスを確認できます。

それが誰かを助けることを願っています！

于 2013-01-22T11:59:00.493 に答える
0

iframeにクラスを与えて、CSSを適用してみることができます。少なくとも幅を％に変更します。

于 2012-09-09T23:42:54.773 に答える
0

これは不可能です。アンカータブのhtmlの幅と高さを使用して、正確な幅と高さを設定できます。それ以外は運が悪い。応答性または流動的な機能はありません。

また、最小幅は220ピクセル、最大幅は520ピクセルです。

<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by @vertmob</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-09-12T01:09:52.517 に答える
0

どうしても流動的である必要がある場合は、サイズ変更イベントの後、またはいくつかのjavascriptタイマーを使用して、そのiframeの幅を変更するjavascriptをコーディングできます。

このためのjsコードを作成するためのあなたのコードを見ることができますか？

于 2012-09-25T14:25:24.417 に答える
0

属性セレクターが機能するはずです：

iframe[id*="twitter-widget"] {
  width: 100%;
}

詳細はこちら。

于 2015-03-29T17:28:15.643 に答える