Twitterの新しいタイムラインが、iPhoneで見ると画像がはみ出してしまう・・・

ホームぺージレスキュー隊アイナパル

今回のご相談は、
iPhone でサイトを見たときに、
左寄りになり右に隙間ができてしまいます。

修正費用の見積もりをお願い致します。
とのこと。

早速サイトをチェック！

パソコンでは問題なく表示。
Google Chromeのデベロッパーツールで
iPhoneで検証・確認するも・・・
問題なく余白無しで表示。

あれれ？
手もとのiPhoneとiPadで確認すると・・・
あら不思議。

HPが左に寄り、
右に余白が・・・・

よくよく検証すると
ページに最下部に設置してある
Twitterのウィジットの画像がはみ出している！！！
つまりは、これが原因ですね。

しかし、Twitterのウィジットは、
publish.twitter.com で行う、
新しいタイムライン・ウィジェットに変更になったばかり。。。

iPhoneで、Twitterのウィジェット（iframe）が
はみ出す現象は今までもあり何度か解決してきましたが・・・

新しいタイムライン・ウィジェットは、
iframe　ではない！！

今までのウィジットの場合、
ios特有のバクでiframeに対して
cssでwidth: 100%;にすると
「iframeをきちんと描画してくれない」という事があるそうで・・・

その　iframe　内のclassに幅を指定してあげていましたが・・・

新しいタイムライン・ウィジェットは、
iframe　ではない！！

困った。

と、言うことで少々時間がかかりましたが、
無事に作業完了。

サイトの特性上、スマホユーザーが多く困っていました。
Twitterのタイムラインを表示させてから余白ができたので、
そのせいとは思っていましたが、
直し方もわからず、相談しました。
お手数かけて申し訳ありません。ありがとうございました。

お客様に喜んでいただき、スタッフ一同感謝です。

ホームページのことで困ったら、まずは！
ホームぺージのレスキュー隊、アイナパルにまずは相談ください。

お問い合わせお待ちしています。