ブログ

【HTML・CSS】twitter・facebookのiframe

twitterやfacebookのプラグインをWebページに埋め込む際

レスポンシブ対応すると幅がうまく合わない場合があります。
しらべてみると、witdh:100%の設定がスマートフォンのブラウザでうまくいかないようです。

対応方法として下記が見つかりました。

・facebook

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] { width: 100%!important;}

・twitter

width: 1px !important;
min-width: 100%  !important;
*width: 100%  !important;

※参考サイト

How to get an IFrame to be responsive in iOS Safari?