質問: 現在、Instagramの画像を埋め込み、表示させる記事を作成しているのですが、PC上から確認すると枠内に収まっているinstagramの画像が、スマートフォンから確認をするとはみ出てしまう現象が発生しており、対処の仕方がわかりません。 同じ現象を経験された方いらっしゃいましたら、解決策などお教えいただきたいです。。。! 現象 --- PC(chrome使用。safariでも確認済み)でははみ出ない画像が、**スマートフォンから確認した場合のみ**、親要素からはみ出る。 PCのデベロッパーツールを用いてスマホサイズで確認をした際にははみ出ない。 なお、現状instagram埋め込みで作成されるiframeに対してはCSSを何も当てていません。 デフォルト設定のwidth: calc(100%-2px) が当たっているのみです。 width:100%!importantをiframeに対して当ててみましたが、変化はありませんでした。 ![PC スマホサイズ表示](https://teratail.storage.googleapis.com/uploads/contributed_images/76314bbd544340ce65788cafe6c4e8f9.png) ![PC 通常サイズ表示](https://teratail.storage.googleapis.com/uploads/contributed_images/7f69c4d59730bff4680cc23bee38174f.png) ![スマホ表示イメージ](https://teratail.storage.googleapis.com/uploads/contributed_images/e714764120a7f1423f6f15864cd29241.png) ![スマホ表示イメージ2](https://teratail.storage.googleapis.com/uploads/contributed_images/45a2cf4ca8d03f7df80cb14b6b656cda.png)
回答: 自己解決しました。 iPhoneにおいて、iframeを使用する際に%指定を行うと発生するバグだったようです。