Never ship viewport-fit=cover to Android; add it on iOS at load

Dami committed Sep 22dfb1f90

commit: dfb1f90cd0ae7dd103bc8d81d6ce71f8a5362f27
parent: cfc3fd2e51a7e27b5b5016512d369afddcab42af
author: Dami <dami.etoile@gmail.com>

4 files changed, +8 -7wrap lines

M	fuji.html	2	+-
M	index.html	2	+-
M	perspective.html	2	+-
M	viewport.js	9	+++++----

M fuji.html +1 -1

@@ -2,7 +2,7 @@
22 <html lang="en">33 <head>44   <meta charset="utf-8">5-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">5+  <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">66   <script src="./viewport.js"></script>77   <meta name="theme-color" content="#1a1a1a">88   <meta name="description" content="Develop a Fujifilm RAF with any film simulation. Runs on your device.">

M index.html +1 -1

@@ -2,7 +2,7 @@
22 <html lang="en">33 <head>44   <meta charset="utf-8">5-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">5+  <meta name="viewport" content="width=device-width, initial-scale=1">66   <script src="./viewport.js"></script>77   <meta name="theme-color" content="#000000">88   <meta name="description" content="Photo tools that run on your phone. Nothing is uploaded.">

M perspective.html +1 -1

@@ -2,7 +2,7 @@
22 <html lang="en">33 <head>44   <meta charset="utf-8">5-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">5+  <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">66   <script src="./viewport.js"></script>77   <meta name="theme-color" content="#1a1a1a">88   <meta name="description" content="Straighten leaning buildings and walls. Runs on your device.">

M viewport.js +5 -4

@@ -1,9 +1,10 @@
11 // 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.2+// iOS needs viewport-fit=cover so the layout can extend under the notch and home indicator and3+// read env(safe-area-inset-*). Android Chrome must never see it: once a window has gone edge-to-edge4+// it does not reliably come back, and the bottom of the layout ends up under the gesture bar.45 (function(){56   var ios=/iPad|iPhone|iPod/.test(navigator.userAgent)||(navigator.platform==='MacIntel'&&navigator.maxTouchPoints>1);6-  if(ios)return;7+  if(!ios)return;78   var m=document.querySelector('meta[name=viewport]');8-  if(m)m.content=m.content.replace(/,\s*viewport-fit=cover/,'');9+  if(m&&m.content.indexOf('viewport-fit')<0)m.content+=', viewport-fit=cover';910 })();