はじめに
以前の投稿からの iOS15 への対応となりますので、こちらもご参照ください。
やってみるしかない
サンプルコード
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, body { position:absolute; top:0; right:0; bottom:0; left:0; height:calc(100% + env(safe-area-inset-bottom)); }
body { 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:fixed; z-index:1; width:100%; height:100%; background-color:#b1dff7; touch-action:none; }
@media ( orientation:landscape ){
#fs { display:flex; }
html.ios15 #fs { height:calc( 100vh + ((100vh - 100%) *2)); }
}
</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 _version = (_ua.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/)||[''])[0].replace(/_/g,'.'),
_fs = document.createElement('div');
_fs.id = 'fs';
document.body.insertBefore(_fs, _container);
_fs.innerHTML = '↑↓ SWIPE';
if (parseFloat(_version) >= 15.0) {
document.querySelector('html').classList.add('ios15');
}
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 ) ){
_container.style.height = '100%';
_fs.style.zIndex = -2;
} else if ( screen.width - window.innerHeight > 20 ) {
_container.style.height = '100vh';
_fs.style.zIndex = 2;
}
}
}
</script>
</body>
</html>
#fsをdisplayで非表示制御すると、display:none時に上部バーが再表示されてしまうので、今回はz-indexで対応。
構造（変更箇所）
まず、jsにてiOSのバージョンが15.0以上の時、html.ios15を追加しておきます。
JS
var _version = (_ua.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/)||[''])[0].replace(/_/g,'.');
if (parseFloat(_version) >= 15.0) {
document.querySelector('html').classList.add('ios15');
}
CSS
html, body { position:absolute; top:0; right:0; bottom:0; left:0; height:calc(100% + env(safe-area-inset-bottom)); }
body { 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:fixed; z-index:1; width:100%; height:100%; background-color:#b1dff7; touch-action:none; }
@media ( orientation:landscape ){
#fs { display:flex; }
html.ios15 #fs { height:calc( 100vh + ((100vh - 100%) *2)); }
}
html.bodyはposition:absoluteとし、#containerをposition:fixedとします。
その際、html,bodyにはheight:calc(100% + env(safe-area-inset-bottom))を設定します。
上部アドレスバー表示設定でportrait時、スクロール操作で上下バーが非表示になりhtml, body: height:100%だと下部に余白が出現する。 + env(safe-area-inset-bottom)することによりその余白を狭めてくれ、再度のスクロール操作でもバーが再表示することがない。
html.ios15 #fsをheight:calc( 100vh + (100vh - 100%) *2)とします。
height:calc( 100vh + 86px)で上部バーが隠れてくれるのだが、height:calc( 100vh + (100vh - 100%) * 2)とすることにより、デバイスの文字サイズの変更等によるバーサイズの変更にも対応できる。
ブラウザの文字サイズ変更には対応しておりません。
制御（変更箇所）
JS
let _ua = navigator.userAgent.toLowerCase(),
_container = document.querySelector('#container');
if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){
+ var _version = (_ua.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/)||[''])[0].replace(/_/g,'.'),
_fs = document.createElement('div');
_fs.id = 'fs';
document.body.insertBefore(_fs, _container);
_fs.innerHTML = '↑↓ SWIPE';
+ if (parseFloat(_version) >= 15.0) {
+ document.querySelector('html').classList.add('ios15');
+ }
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 ) ){
+ _container.style.height = '100%';
+ _fs.style.zIndex = -2;
- _fs.style.display = 'none';
} else if ( screen.width - window.innerHeight > 20 ) {
+ _container.style.height = '100vh';
+ _fs.style.zIndex = 2;
- _fs.style.display = 'flex';
}
}
+ }
- } else {
- _container.style.height = '100%';
- }
#fsの表示・非表示をdisplayからz-indexでの制御に変更。
_container.style.height = '100%';の else処理が動いてなかったので、iPhone Safari 時での処理に変更。
まとめ
出来ることはやった、、krpanoのアップデートまでの応急処置としては使える、、かな？
↧