はじめに
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 = '↑↓ 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">↑↓ 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 = '↑↓ 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以外は、試行錯誤を繰り返した結果、、未対応となっております。
↧