iPhone Safariで無理やり縦フルスクリーン

iPhone Safariが縦向きの時、Webページをフルスクリーンにすることは、通常できません。ただし、自分の制作しているページに限り、無理やりフルスクリーンにすることはできます。

iPhone Safariの縦フルスクリーン

ちょっと古いですがiPhone7で検証。iOSは15です。

iPhoneのSafariで縦フルスクリーンを無理やり実現するには、下記3つの方法を組み合わせます。

  1. iPhone Safariは横向きにするとフルスクリーンになる
  2. iPhoneのアクセスガイドで、横向き状態で固定できる
  3. CSSで横向き画面を90度回転させ、縦向きにする

3.でCSSを使うために、自分が制作しているサイトに限られてしまいます。(正確には、自作サイトに全画面iframeを設置することで、他サイトをフルスクリーンにすることはできます。)

1. iPhone Safariは横向きで全画面表示

iPhone Safariを横に傾けたとき、全画面にならない場合は設定変更が必要です。

コントロールセンターを表示し、画面縦向きロックをオフにします。(上の図参照)

iOS15のSafariでは、横向きにするだけで全画面になります。

2. iPhoneを横向き固定

常にフルスクリーンが解除されないよう、画面の横向き固定を行います。

やり方はマイナビで詳しく説明されています。そちらをご確認ください。

iPhoneのアクセスガイド機能を使います。

3. CSSで90度回転させて縦向きに

フルスクリーン表示させたいWebページを作ります。

<div id=”contents”></div>の中は自由に作ります。

このdivに以下のCSSを当てます。

  • 縦横比が反転した全画面サイズにする・・・width: 100vh; height: 100vw;
  • 90度回転・・・transform: rotate(-90deg);
  • 位置調整・・・margin-top: calc((100vh – 100vw) / 2); margin-left: calc((100vw – 100vh) / 2);
  • スクロールさせる・・・overflow: scroll;

それを<div id=”wrap”></div>で囲い、余計な余白をoverflow: hidden;で切り落とします。

以上、かなり限定的な使い方だと思いますが、iPhone Safariで無理やり縦フルスクリーンにする方法でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)