iphoneでtwitter widegetのiframeが横にはみ出るバグの修正

twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが

<a class="twitter-timeline" data-width="100%" 

 

 

のくだり。

幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。

jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。

iPhone7でTwitterのウィジェット(iframe)がはみ出す【解決】

簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。

でかいけつしました。

このアイデアを思いつくのが素晴らしいです。ありがとうございました。

ディスカッションに参加

2件のコメント

  1. リンク先の
    .twitter-widget-wrapper iframe { width: 740px !important; }
    をコピペだけでいけますか?

    1. 他の設定がどうなっているかわからないので何とも言えませんが、一度試していただくとよいかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です