iPhoneでも全画面表示させたい、んだ。

# はじめに

> iOS15への対応を行いましたので以下の投稿もご参照ください。

https://qiita.com/MARUMOTOSHINICHI/items/b1ee8662ebf5979b5929

---

#### Fullscreen API に対応していない iPhoneで、どうしても全画面で表示させたい時がある。

特に landscape時の上部バーは、普通のサイトではスクロールすると隠れてくれるので邪魔に感じることはない。しかし、パノラマやVR等のコンテンツを表示する場合は邪魔に感じてしまいます、よね。

PWAにしてホーム画面に追加で解決はする、するのかもしれない、、がそうじゃない、んだ。解決はするかもなのだが、わざわざホーム画面に追加したりはしなかったりとか、するよね。

+ <strong>こんな時、個人的に好きなこがいる、__[krpano](https://krpano.com/)__である。</strong>
<br><code><strong>上下にスワイプして上部バーを隠してくれる。</strong></code>

> <strong>他のコンテンツでもコレをやりたい、んだ。</strong>


# やってみよう
> <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 >
	* { margin:0; padding:0; }
	html { height:100%; }
	body { height:100%; font-family:Lato, sans-serif; color:#fff; line-height:1.8; }
	#fs { overflow:hidden; position:absolute; z-index:2; display:none; justify-content:center; align-items:center; width:100%; height:calc( 100vh + 1px ); background-color:RGBA(0,0,0,0.8); touch-action:pan-y }
	#container { overflow:hidden; position:relative; z-index:1; top:0; width:100%; height:100%; background-color:#b1dff7; touch-action:none; }
	@media ( orientation:landscape ){
		#container { height:100vh; }
	}
</style>
</head>
<body>
	<div id="container">
		<p style="position:absolute;left:5px;top:5px;width:40px;height:40px;background-color:#fff;"></p>
		<p style="position:absolute;right:5px;top:5px;width:40px;height:40px;background-color:#fff;"></p>
		<p style="position:absolute;right:5px;bottom:5px;width:40px;height:40px;background-color:#fff;"></p>
		<p style="position:absolute;left:5px;bottom:5px;width:40px;height:40px;background-color:#fff;"></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');
			_fs.id = 'fs';
			document.body.insertBefore(_fs, _container);
			_fs.innerHTML = '&#8593;&#8595;&nbsp;SWIPE';

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

			function fs_display() {
				if ( window.orientation == 0 || ( window.orientation != 0 && screen.width - window.innerHeight <= 20 ) ){
					_fs.style.display = 'none';
				} else if ( screen.width - window.innerHeight > 20 ) {
					_fs.style.display = 'flex';
				}
			}
		} else {
			_container.style.height = '100%';
		}
	</script>
</body>
</html>
```
<br>
> <strong>構造</strong>

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

```css:CSS
html, body { height:100%; }
#fs { overflow:hidden; position:absolute; z-index:2; display:none; width:100%; height:calc( 100vh + 1px ); touch-action:pan-y }
#container { overflow:hidden; position:relative; z-index:1; width:100%; height:100%; touch-action:none; }
@media ( orientation:landscape ){
    #container { height:100vh; }
}
```

<code> html, body, div#container</code> を <code>height:100%</code>、<code>div#fs</code> を <code>height:calc( 100vh + 1px )</code> とし、landscape時の <code>div#container</code> を <code>height:100vh</code> とします。 

:::note info
landscape時、コンテンツの高さを <code>100vh</code> とし <code>div#fs</code> の高さを +1pxすることによって、上下スワイプによる上部バーの移動がよりスムーズに処理されます。
:::

:::note warn
Android等において、下部バーに要素が隠れないよう iPhone Safari 以外は js にて <code>height:100%</code> に戻します。
:::

<code>div#fs, div#container</code> を <code>overflow:hidden</code> とし、<code>div#fs</code>は <code>touch-action:pan-y</code>、<code>div#contaner</code>は <code>touch-action:none</code> とし制限をかけます。

<br>
> <strong>制御</strong>

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

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

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

    function fs_display() {
        if ( window.orientation == 0 || ( window.orientation != 0 && screen.width - window.innerHeight <= 20 ) ){
            _fs.style.display = 'none';
        } else if ( screen.width - window.innerHeight > 20 ) {
            _fs.style.display = 'flex';
        }
    }
} else {
    _container.style.height = '100%';
}
```

<code>div#fs</code> は iPhone Safari のみDOM生成します。

landscape時に <code>div#fs</code> を表示し、上下スワイプで上部バーが隠れると同時にウィンドウリサイズイベントがトリガーされ <code>div#fs</code> が<code>display:none</code>となります。


# まとめ
Safari以外は、試行錯誤を繰り返した結果、、未対応となっております。