iPhoneでも全画面表示（iOS15への対応）

https://github.com/Shinichi-Marumoto/iphone-fullscreen

# はじめに

>以前の投稿からの iOS15 への対応となりますので、こちらもご参照ください。
>また、参考にさせていただいてるkrpanoがバージョンアップし、iOS15でのフルスクリーン表示に対応されました。

https://qiita.com/MARUMOTOSHINICHI/items/151e93e54d367e36d7eb

https://krpano.com/home/

# やってみるしかない
> <strong>サンプルコード</strong>

```html:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<style >
	:root { --sat: env(safe-area-inset-top); --sar: env(safe-area-inset-right); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); }
	* { margin:0; padding:0 }
	html, body { height:calc(100% + var(--sab)) }
	body { font-family:sans-serif; color:#fff }
	#fs { position:absolute; display:none; justify-content:center; align-items:center; width:100%; height:100%; background-color:RGBA(0,0,0,0.8) }
	#fsd { position:absolute; z-index:-2; width:100%; height:100vw; touch-action:pan-y }
	#container { position:fixed; z-index:1; width:100%; height:100%; background-color:#b1dff7; touch-action:none; transform:translateZ(0) }
	#container p { position:absolute; width:40px; height:40px; background-color:#fff }
	#container p:nth-child(1) { left:5px; top:5px; margin-left:var(--sal) }
	#container p:nth-child(2) { top:5px; right:5px; margin-right:var(--sar) }
	#container p:nth-child(3) { right:5px; bottom:5px; margin-right:var(--sar); margin-bottom:var(--sab) }
	#container p:nth-child(4) { bottom:5px; left:5px; margin-bottom:var(--sab); margin-left:var(--sal) }
	@media ( orientation:landscape ){
		#container p:nth-child(n+3) { margin-bottom:0 }
	}
</style>
</head>
<body>
    <div id="container">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <script>
        let _ua = navigator.userAgent.toLowerCase(),
            _container = document.querySelector('#container');

        if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){
            var _fs = document.createElement('div'),
                _fsd = document.createElement('div');
            _fs.id = 'fs';
            _fs.innerHTML = '&#8593;&nbsp;SWIPE';
            _container.appendChild(_fs);
            _fsd.id = 'fsd';
            document.body.insertBefore(_fsd, _container);

            document.addEventListener( 'DOMContentLoaded', fs_display );
            window.addEventListener( 'resize', fs_display );

            function fs_display() {
                if ( window.orientation == 0 ) {
                    _container.style.height = '100%';
                    _fs.style.display = 'none';
                } else {
                    _container.style.height = '100vh';
                    if ( screen.width - window.innerHeight <= 20 ) {
                        _fs.style.display = 'none';
                        _fsd.style.zIndex = '-2';
                    } else if ( screen.width - window.innerHeight > 20 ) {
                        _fs.style.display = 'flex';
                        _fsd.style.zIndex = '2';
                        window.scrollTo(0, 0);
                    }
                }
            }
        }
    </script>
</body>
</html>
```

<br>
> <strong>構造（変更箇所）</strong>

```html:HTML
<body>
    <div id="fsd"></div>
    <div id="container">
        // Your contents.
        <div id="fs">&#8593;&nbsp;SWIPE</div>
    </div>
</body>
```

:::note info
<code>&#8593;&nbsp;SWIPE</code>を表示する<code>div#fs</code>を<code>div#container</code>内に、スワイプする為の空要素として<code>div#fsd</code>を<code>div#container</code>外に分けた構造とします。
:::

```css:CSS
html, body { height:calc(100% + env(safe-area-inset-bottom)) }
#fs { position:absolute; display:none; justify-content:center; align-items:center; width:100%; height:100%; background-color:RGBA(0,0,0,0.8) }
#fsd { position:absolute; z-index:-2; width:100%; height:100vw; touch-action:pan-y }
#container { position:fixed; z-index:1; width:100%; height:100%; background-color:#b1dff7; touch-action:none; transform:translateZ(0) }
```

<code>div#container</code>を<code>position:fixed</code>とし、<code>html,body</code>には<code>height:calc(100% + env(safe-area-inset-bottom))</code>、<code>div#fsd</code>は<code>height:100vw</code>を設定します。
<code>div#fsd</code>は<code>touch-action:pan-y</code>、<code>div#contaner</code>は<code>touch-action:none</code>とし制限をかけるのは変わりません。

:::note info
<code>div#fsd</code>を<code>height:100vw</code>とすることで、portrait時には邪魔にならずlandscape時にはスワイプする為の要素となります。
:::
:::note info
<code>div#container</code>に<code>transform:translateZ(0)</code>を設定することで、<code>position:fixed</code>でも非表示領域をレンダリングしてくれます。
:::

:::note alert
設定からの文字サイズ変更には対応しておりますが、ブラウザ側での文字サイズ変更には対応しておりません。
:::

<br>
> <strong>制御（変更箇所）</strong>

```diff_javascript:JS
let _ua = navigator.userAgent.toLowerCase(),
	_container = document.querySelector('#container');

if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){
	var _fs = document.createElement('div'),
+		_fsd = document.createElement('div');
	_fs.id = 'fs';
	_fs.innerHTML = '&#8593;&nbsp;SWIPE';
	_container.appendChild(_fs);
+	_fsd.id = 'fsd';
+	document.body.insertBefore(_fsd, _container);

	document.addEventListener( 'DOMContentLoaded', fs_display );
	window.addEventListener( 'resize', fs_display );

	function fs_display() {
		if ( window.orientation == 0 ) {
+			_container.style.height = '100%';
			_fs.style.display = 'none';
		} else {
+			_container.style.height = '100vh';
			if ( screen.width - window.innerHeight <= 20 ) {
				_fs.style.display = 'none';
+				_fsd.style.zIndex = '-2';
			} else if ( screen.width - window.innerHeight > 20 ) {
				_fs.style.display = 'flex';
+				_fsd.style.zIndex = '2';
+				window.scrollTo(0, 0);
			}
		}
	}
}
```

<code>div#container</code>はportrait時<code>height:100%</code>、landscape時<code>height:100vh</code>となるよう制御し、<code>div#fsd</code>の表示・非表示を<code>z-index</code>で制御しコンテンツの高さを保つことで上部バーの再表示を防ぎます。

:::note info
<code>window.scrollTo(0, 0)</code>でスクロール状態をリセットすることで、上方向スワイプのみの操作でバーを隠せるようになりました。
:::

# まとめ
下部セーフエリア周りの仕様が、、<code>safe-area-inset-bottom</code>のサイズと実際のタップ範囲が違う、、のか、、ツールバーのサイズは<code>1rem + env(safe-area-inset-bottom)</code> ということらしく、タップ範囲となるっぽいのだが、、下のタブバー表示でツールバー非表示にするとタップ範囲は併せて狭くなってくれるの、、、だが、上部アドレスバー表示の時は変わらない、、、んだ。