【Labs】インスタ埋め込みで小さい画面のスマホからはみ出さないようにする

こんにちは(・∀・)
web design lab中の人です。

インスタグラムをWebサイトに埋め込むと小さい画面のスマホではみ出して表示されてしまうのを防ぐ方法。

インスタ埋め込みで小さい画面のスマホからはみ出さないようにする

ツイッターやYouTubeをWebサイトに埋め込んで表示させてもはみ出すことなく表示出来るのですが、インスタだけは小さい画面のスマホでははみ出して表示されてしまいます。Chrome、Safariとも同じ症状が出ます。

PCの開発者モードで見ると画面サイズを小さくしてもちゃんと表示されます。実機のiPhoneのChromeとSafariでの現象です。アンドロイドでは大丈夫でした。

HTMLとCSSを次の通りにするとちゃんと表示されるようになります。

インスタグラムから出力された埋め込みコード、blockquote(クラス名instagram-media)をDIV要素を作ってその中に入れます。クラス名はinstagramにしました。

HTML

<div class="instagram">
<blockquote class="instagram-media"
インスタグラムから出力された埋め込みコード
</blockquote>
</div>

@mediaで大きい画面サイズと小さい画面サイズでCSSの内容を変更します。ここでは小さいサイズは959px以下にしてます。instagram-mediaに指定してある要素のサイズは320pxです。

CSS

@media (max-width: 960px){/* 画面サイズ959px以下ではこのコードを採用*/
.instagram {
  margin: 40px auto;
  display: flex;
  justify-content: center;
}
  .instagram-media{
    padding: 0 !important;
    margin: 0 !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: initial !important;
  }
}
@media (min-width: 960px){/* 画面サイズ960px以上ではこのコードを採用*/
.instagram {
  width: 60%;
  margin: 40px auto;
}
}

Result

小さい画面のiPhoneでもちゃんと表示されるようになりました。