タイトルの出オチ記事。
前提
- Chrome
- 2023/05/02時点
原因
- portrait, landscapeは画面のwidthとheightの縦横比で決まる
- iframeの画面サイズは親画面サイズに依存しない
上記2つの原因により、iframeで作られた画面を最小化（ヘッダだけ見える状態にする）すると、縦横比が変わるためlandscapeとして判定されます。
対応
landscapeとして処理される前提で、目的の処理のみ動くように回避します。
次のCSS Media Queryは、スマートフォンでlandscapeにした時にはメッセージが表示されるが、PCやタブレットを含めたそのほかでは何も表示されないようにする設定です。実際の状況に寄りますがヘッダの高さ分のmin-height: 50pxを設定することで、iframeの中で最小化を実装しても目的の処理だけが動くようになりました。
@media screen and (min-height: 50px) and (max-height: 428px) and (max-width:928px) and (orientation: landscape) { /* スマートフォンのlandscapeのメッセージ */ }
ソースコード
- なし
終わりに
iframeで処理を実装することがあまりなかったため、仕様を把握しておらずにハマっていました。親画面とiframeは独立しており、iframeから親画面の情報を取得しようとするとCORS Policy違反が発生することもある等々の仕様も知りませんでした。
フロントの知識が弱くてすぐに忘れそうですので、備忘録として残しておきます。
