iPhone Safariが縦向きの時、Webページをフルスクリーンにすることは、通常できません。ただし、自分の制作しているページに限り、無理やりフルスクリーンにすることはできます。
iPhone Safariの縦フルスクリーン
ちょっと古いですがiPhone7で検証。iOSは15です。
iPhoneのSafariで縦フルスクリーンを無理やり実現するには、下記3つの方法を組み合わせます。
- iPhone Safariは横向きにするとフルスクリーンになる
- iPhoneのアクセスガイドで、横向き状態で固定できる
- CSSで横向き画面を90度回転させ、縦向きにする
3.でCSSを使うために、自分が制作しているサイトに限られてしまいます。（正確には、自作サイトに全画面iframeを設置することで、他サイトをフルスクリーンにすることはできます。）
1. iPhone Safariは横向きで全画面表示
iPhone Safariを横に傾けたとき、全画面にならない場合は設定変更が必要です。
コントロールセンターを表示し、画面縦向きロックをオフにします。（上の図参照）
iOS15のSafariでは、横向きにするだけで全画面になります。
2. iPhoneを横向き固定
常にフルスクリーンが解除されないよう、画面の横向き固定を行います。
やり方はマイナビで詳しく説明されています。そちらをご確認ください。
iPhoneのアクセスガイド機能を使います。
3. CSSで90度回転させて縦向きに
フルスクリーン表示させたいWebページを作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <meta charset="utf-8"> <title>フルスクリーン表示</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; } #contents { width: 100vw; height: 100vh; } @media (orientation: landscape){ #wrap { width: 100vw; height: 100vh; overflow: hidden; } #contents { width: 100vh; height: 100vw; transform: rotate(-90deg); margin-top: calc((100vh - 100vw) / 2); margin-left: calc((100vw - 100vh) / 2); overflow: scroll; } } </style> </head> <body> <div id="wrap"> <div id="contents"> <h1>iPhone Safari<br>フルスクリーン縦固定</h1> <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p> </div> </div> </body> </html> |
<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で無理やり縦フルスクリーンにする方法でした。