Keep viewport-fit=cover on iOS only so Android does not hide the toolbar

Dami committed Sep 2230fe629

commit: 30fe6299788ae3a70b850705dbb797ee5b4c67b1
parent: cc5dc795aab71199b6a4e01ae518549dcac808f4
author: Dami <dami.etoile@gmail.com>

6 files changed, +16 -2wrap lines

M	_headers	3	+++
M	index.html	1	+
M	perspective.html	1	+
M	scripts/package.py	2	+-
M	sw.js	2	+-
A	viewport.js	9	+++++++++

M _headers +3 -0

@@ -9,6 +9,9 @@
99 /*.mjs1010   Content-Type: text/javascript1111 12+/*.js13+  Content-Type: text/javascript14+1215 /sw.js1316   Cache-Control: no-cache1417 

M index.html +1 -0

@@ -3,6 +3,7 @@
33 <head>44   <meta charset="utf-8">55   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">6+  <script src="./viewport.js"></script>67   <meta name="theme-color" content="#000000">78   <meta name="description" content="Photo tools that run on your phone. Nothing is uploaded.">89   <meta name="apple-mobile-web-app-capable" content="yes">

M perspective.html +1 -0

@@ -3,6 +3,7 @@
33 <head>44   <meta charset="utf-8">55   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">6+  <script src="./viewport.js"></script>67   <meta name="theme-color" content="#1a1a1a">78   <meta name="description" content="Straighten leaning buildings and walls. Runs on your device.">89   <meta name="apple-mobile-web-app-capable" content="yes">

M scripts/package.py +1 -1

@@ -6,7 +6,7 @@ import shutil, hashlib
66 root=Path(__file__).resolve().parent.parent77 dist=root/'dist'88 dist.mkdir(exist_ok=True)9-public=['index.html','perspective.html','style.css','home.mjs','app.mjs','worker.mjs','geometry.mjs','manifest.webmanifest','NOTICE.md','README.md','_headers']9+public=['index.html','perspective.html','style.css','viewport.js','home.mjs','app.mjs','worker.mjs','geometry.mjs','manifest.webmanifest','NOTICE.md','README.md','_headers']1010 for f in public: shutil.copyfile(root/f,dist/f)1111 for d in ['assets','LICENSES']: shutil.copytree(root/d,dist/d,dirs_exist_ok=True)1212 digest=hashlib.sha256()

M sw.js +1 -1

@@ -1,6 +1,6 @@
11 // SPDX-License-Identifier: AGPL-3.0-or-later22 const CACHE='gudpics-v1';3-const FILES=['./','./index.html','./perspective','./style.css','./home.mjs','./app.mjs','./worker.mjs','./geometry.mjs','./manifest.webmanifest','./assets/core.mjs','./assets/core.wasm','./assets/icon.svg','./assets/icon-192.png','./assets/icon-512.png','./NOTICE.md','./LICENSES/AGPL-3.0.txt','./LICENSES/GPL-3.0.txt'];3+const FILES=['./','./index.html','./perspective','./style.css','./viewport.js','./home.mjs','./app.mjs','./worker.mjs','./geometry.mjs','./manifest.webmanifest','./assets/core.mjs','./assets/core.wasm','./assets/icon.svg','./assets/icon-192.png','./assets/icon-512.png','./NOTICE.md','./LICENSES/AGPL-3.0.txt','./LICENSES/GPL-3.0.txt'];44 self.addEventListener('install',e=>{self.skipWaiting();e.waitUntil(caches.open(CACHE).then(c=>c.addAll(FILES)));});55 self.addEventListener('activate',e=>e.waitUntil(caches.keys().then(keys=>Promise.all(keys.filter(k=>k!==CACHE).map(k=>caches.delete(k)))).then(()=>self.clients.claim())));66 self.addEventListener('fetch',e=>{

A viewport.js +9 -0

@@ -0,0 +1,9 @@
1+// SPDX-License-Identifier: AGPL-3.0-or-later2+// viewport-fit=cover is needed on iOS for the notch and home indicator. On Android Chrome it3+// draws the page under the gesture bar, hiding the bottom of the layout, so only iOS keeps it.4+(function(){5+  var ios=/iPad|iPhone|iPod/.test(navigator.userAgent)||(navigator.platform==='MacIntel'&&navigator.maxTouchPoints>1);6+  if(ios)return;7+  var m=document.querySelector('meta[name=viewport]');8+  if(m)m.content=m.content.replace(/,\s*viewport-fit=cover/,'');9+})();