iPhoneやiPadで、Twitter埋め込みがはみ出した!原因、解決法

仕事

一昔前より減った気もしますが、今でもブログなどにtwitter埋め込みタイムラインをされているサイト見かけますよね。

以前、お客さんのサイトでも埋め込みを行いましたが、指摘が入ったため修正することになりました。
うぅ、chromeのシュミレーションでは確認しているのですが、iOSが手元になかったため度々Macの洗礼を受けますね…

症状について

埋め込み欄が親要素を飛び出して表示され、レイアウトが崩れています。
Macは未確認なのですが、iphone、ipadでこの症状が見られました。

ipadはともかく、日本のスマホはiphone率が異常に高いためこれは無視できません。

なお、いずれもchromeのシュミレーションでは問題ありませんでした。

原因は何?

問題は「iframe」。

Twitter公式サイトから作られる埋め込み用htmlはiframeが利用されています。

こちらの幅を100%で設定しても正常に表示されません。

いくつかのブラウザで表示させてみましたがいずれもアウト。そのためsafariが悪いわけではなく「IOS」のバグのようです。

そういえば楽天でもiframeを使う機会が多いのですが、高さ指定でiphoneに苦しめられたのを思い出しました。
確か%の他、vhでの指定もダメだったと思います。

指定方法を変えれば解決

ちょっと不細工になりますが、レスポンシブはあきらめて絶対値で指定することにしました。

もともと、PCやタブレットではコンテンツ2つを横に並べて表示。
スマホくらいの幅の時はコンテンツを縦に並べて表示する作りだったため、少し不細工ですがiframeを450pxで固定することに。

width: 450px !important;
max-width:100%;

これで、iOS端末以外のある程度のレスポンシブも確保しました。

CSSでデバイスの幅ごとに指定する方法も

レスポンシブでiframeを使用する場合、iframeの幅や高さをデバイスの幅に合わせて細かく設定するのが一番丁寧だと思います。
使いまわせるので時間があるときに作成してみたい!

コメント

タイトルとURLをコピーしました