Twitterのタイムラインがスマホではみ出る問題
今回の課題はWEBサイトにTwitterの埋め込みをする際に、スマホ用で画面からはみ出てしまう問題です。
仕事で扱う機会が多いので、自分も忘れないためにもまとめてみました。
はみ出ないために何をすればいいか
■解決方法
- ①「iframeを囲うdivタグ」に、box-sizing:border-boxを追加。
- ②「iframe.twitter-timeline-rendered」にwidthとmargin:0 auto;を追加。
例 )
iframe.twitter-timeline-rendered {
width: 550px !important;
margin:0 auto;/*これを入れないとめっちゃ細く200pxくらいで表示されます。*/
}
余談)Twitter埋め込みがスクロールできない問題
上記のはみ出ない問題は解決しましたか?
ここで筆者がつまづいた問題についてご紹介します。
スマホでTwitterの埋め込みがスクロールできない!!という問題がありました。
PCでの確認はできるのに実機だとできない。。
こちらの問題も起こる可能性がありますので、ぜひ下記もご覧ください。
解決編)Twitter埋め込みがスクロールできない問題
■解決方法
- ①iframeを囲うdivタグにoverflow: scroll(またはauto);追加。
- ②iframeを囲うdivタグに、overflow-scrolling: touch;を追加。
まとめ
いかがでしたか?無事解決しましたでしょうか。。
私もscrollだだけで解決した気になっていましたが、油断禁物でした。
やはり実機確認はちゃんと必要だと実感しました。