Twitterのタイムライン埋め込みがiPhoneで閲覧時にはみ出る時の対応策:メモ

見つけた情報を元に少しだけ改良できたかもと思いましたのでメモとして。
結局あまり良い方法ではないように思いますが。

発生した問題

1. Twitterのタイムラインを埋め込む
2. iPhone閲覧時に横方向にはみ出る(iOS12.3.1で確認)

この件に関しては下記の記事を見る方が良いです(すでに解決方法まで記載されているものもありますが)。

• iphoneでtwitter widegetのiframeが横にはみ出るバグの修正
• Embedded timeline problem on iOS

2015年でフォーラムに上がっていますがそこから今までの間に発生を確認していた覚えはないため(埋め込み作業自体の数が多くないので継続的に確認できていません)、どこかのタイミングで治って再発してということなのかもしれません。

既存の対応策

• iphoneでtwitter widegetのiframeが横にはみ出るバグの修正
• iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】
• Twitter timeline width overflow (iPhone) #11760

すでに記載したページの他にautoを指定する方法もありましたが、こちらは動作を確認できませんでした。

対応策

iframeの幅に大きな値を!importで指定する場合、今後TwitterやiOSの方で記述変更があった際には逆に問題になるかもしれないと感じたため、以下のような形を検討しました。

<div class="twitter-wrap">
<!-- twitterの埋め込みコードを記載 -->
</div>

@media only screen and (max-width: 780px) {
  .twitter-wrap{
    overflow: hidden;
  }
  .twitter-wrap iframe{
    /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
    width: calc(100vw - 20px)!important;
  }
}

100vwの指定でも求める動作になることを確認できたので、1カラムでかつコンテンツ左右の余白が一定の場合であれば上記の指定ではみ出ないと思われます。

今後の変更でまた違う状態になる可能性もありますが、ラッパーのdivにhiddenをつけているので最悪はみ出ることはないでしょう。

結び

当記事の方法でも不安は残るので、よりよい方法があればそちらの採用をお勧めします。