こんにちは、ぱのん(@panonbox)です。
Twitterで自分のつぶやいたタイムラインをブログに埋め込みたいと考えることがあります。そんな時の為に、ブログのウィジェット機能を使って簡単に埋め込めるように、Twitterの公式サイトでは埋め込み用URL作成ページがあり、誰でも埋め込み用URLを作ることができます。
このように誰でも簡単にTwitterのタイムラインを自分のブログに埋め込むことが出来るのですが、「iPhoneやiPad」などモバイル端末で見た場合に表示画面が崩れてしまう場合があります。
私の場合もappleの製品で見た場合、レスポンシブ設定なのに大きく崩れてしまいました。
自分なりの簡単な解決策を見つけたのでその方法を紹介したいと思います。
Twitterを埋め込むとIOSでなぜ?はみ出すのか?
Twitterを埋め込むと「iPhoneやiPad」のようなappleの製品で画面が崩れてはみ出してしまうのでしょう?
Twitter公式サイトから作られる埋め込み用のURLでは「幅のサイズ100%」の設定なので、レスポンシブに対応してるブログに埋め込んだ場合は、親サイズに自動で調整されて綺麗に表示されるはずです。
もちろんパソコンでは画面サイズに関係なく、設定の通り自動調節され綺麗に表示されています。
ところが「iPhoneやiPad」のようなapple製品で表示すると、「親要素」を飛び越えてとんでもないサイズの幅で表示されてしまいます。
このような感じでスライドメニューのサイズを大きく飛び越えて表示されます。
これは「iframe」を使ったときに起きる「IOS」のバグのようです。試しにいくつかのブラウザで表示させてみましたが、結果は同じでsafariが悪いわけではないようです。

アップル製品で表示が崩れてしまうのは、iOSのバグによるものなんです。
iPhoneやiPadではみ出した時の対策方法
対策方法は「jQueryやらCSS」などいろいろな方法が紹介されていますが、問題はシンプルなんです。
なぜ?はみ出すのか?で解説したとおり問題は・・・
iframeにwidth: 100%の設定すると機能しないバグ
というシンプルな問題なんです。
結論をいうと
バグの出る設定の逆『iframeにwidth: 100%』以外の設定にしてあげれば解決します。
「jQueryやらCSS」などを使って対策する方法もWebでたくさん解説されていますが、基本的にはスタイルシートやJSを使って幅を指定したり、幅を指定した箱(div)の中に入れる方法です。
たとえばCSSで
iframe { width: 740px !important; }
強制的に740pxに上書きします。表示される場所が740px以下であればレスポンシブ対応により小さく調整され表示されます。
ですがこのままでは「iframe」要素すべてのサイズが740pxになってしまいます。
「ID」や「Class」を指定してスタイルの調整をすれば良いのです、この方法で綺麗に表示することが出来ました。
ですが、よく考えると「iframeにwidth: 100%」の設定がダメで、後から強制的に上書きを行っていますが、最初から幅を大きめに指定してあげれば良いのではないでしょうか?
このように、埋め込み用URLを発行するときにオプションで幅を少し大きめに指定してあげれば「width: 100%」ではなくなってIOSのバグが起きなくなります。
難しいことを考えないで埋め込み用URL発行時に幅の指定をしてあげれば綺麗に表示するようになりました。

普段からPCで記事を書いてる人は、あまりモバイルでのチェックを行わでしょう。端末の問題で崩れている場合があるので一度チェックしてみて下さい。
まとめ
Twitterのタイムラインをブログに埋め込んだ際は少し大きめの幅を指定しましょう。
一行で済む話を長々解説してきました(笑)
さて今回はいかがだったでしょうか?
最後まで読んでいただいてありがとうございました。
コメント