はじめに

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

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

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

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

こんな時、個人的に好きなこがいる、__krpano__である。

上下にスワイプして上部バーを隠してくれる。

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

やってみよう

サンプルコード

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>

> 構造

HTML

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

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; }
}

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

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

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

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

> 制御

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%';
}

div#fs は iPhone Safari のみDOM生成します。

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

まとめ

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