【モバイル表示】 デベロッパーツール上では正常だが、実機でデザインが崩れる

Question

以下の記事を作成し公開しました。
https://mcbattle-ch.jp/art-song1.php

ChromeやFirefox等のデベロッパーツールでデザインの確認をすると、ページの横幅がデバイスの横幅と一致します。
しかし、スマートフォンの実機(iPhone se, iPhone 6s)で確認すると、itunesのプレイヤーの横幅が広くなってしまい、それに合わせてページの横幅も広がってしまいます。

この部分（iframe)のcssを確認すると、
widthが100%で指定されており、問題ないように感じます。

itunesのプレイヤーは、Appleが公式で提供しているToolboxを使い作成しました。

原因や試した方が良いことなど、教えて頂けると助かります。
よろしくお願いいたします。

Answer 1

実際に私が試したわけではないのですが・・・
iframeをdivタグで囲い、そのdivに対してCSSを追加すれば改善されるようです

サンプルソース

<div class="frame_wrap">
<iframe>
</iframe>
</div>

.frame_wrap {
  width: 450px;
  height: 150px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

参考

https://www.web-officer.com/html-css/solution-of-when-theyve-jumped-out-when-the-iframe-saw-in-the-smartphone.html

Comments

[d0ne1s]

回答ありがとうございます。
試してみましたが、うまくいきませんでした。
デベロッパーツール上ではcssが適用されていることが確認でき、スマホではプライベートブラウズでアクセスしたので、アップロード方法やキャッシュ等の問題ではないかと思います。

[8yazaki]

MacのSafariでのレスポンシブデザインモード（Chromeのデベロッパーツールと類似機能）でも試してみましたがおかしなところがなく、スマホ実機のみおかしいみたいです^^;

[d0ne1s]

そのようですね。
ありがとうございます。