今回の課題はWEBサイトにTwitterの埋め込みをする際に、スマホ用で画面からはみ出てしまう問題です。

仕事で扱う機会が多いので、自分も忘れないためにもまとめてみました。

はみ出ないために何をすればいいか

■解決方法

1. ①「iframeを囲うdivタグ」に、box-sizing:border-boxを追加。
2. ②「iframe.twitter-timeline-rendered」にwidthとmargin:0 auto;を追加。

例 ）

iframe.twitter-timeline-rendered {
width: 550px !important;
margin:0 auto;/*これを入れないとめっちゃ細く200pxくらいで表示されます。*/
}

余談）Twitter埋め込みがスクロールできない問題

上記のはみ出ない問題は解決しましたか？

ここで筆者がつまづいた問題についてご紹介します。

スマホでTwitterの埋め込みがスクロールできない！！という問題がありました。

PCでの確認はできるのに実機だとできない。。

こちらの問題も起こる可能性がありますので、ぜひ下記もご覧ください。

解決編）Twitter埋め込みがスクロールできない問題

■解決方法

1. ①iframeを囲うdivタグにoverflow: scroll(またはauto);追加。
2. ②iframeを囲うdivタグに、overflow-scrolling: touch;を追加。

まとめ

いかがでしたか？無事解決しましたでしょうか。。

私もscrollだだけで解決した気になっていましたが、油断禁物でした。

やはり実機確認はちゃんと必要だと実感しました。