Use JS to detect Apple mobile devices

wcolding · Jan 19, 2024 · d7116e1 · d7116e1
1 parent 5319005
commit d7116e1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/static/App.js b/static/App.js
@@ -11,7 +11,10 @@ let nameElement;
 let descElement;
 
 function init() {
-
+    // Check for mobile Apple devices and fix viewport
+    let devices = ['iphone', 'ipad'];
+    filterViewportByDeviceList(devices);
+
     nameElement = document.getElementById("presetName");
     descElement = document.getElementById("presetDesc");
     updatePresetDesc(0);
@@ -40,6 +43,17 @@ function init() {
     updateCounterDisplay();
 }
 
+function filterViewportByDeviceList(listOfDevices) {
+    let navString = navigator.userAgent.toLowerCase();
+    listOfDevices.forEach((device) => {
+        if (navString.indexOf(device) != -1) {
+            let viewport = document.querySelector("meta[name=viewport]");
+            viewport.setAttribute('content', 'width=device-width, user-scalable=no');
+            return;
+        }
+    });
+}
+
 function clearAllChecks() {
     gamesObj.forEach((entry) => {
         let allSelect = document.getElementById(`${entry.game}_allSelect`);

diff --git a/templates/App.html b/templates/App.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, user-scalable=no" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Multibingo Generator</title>
         <link rel="stylesheet" href="../static/App.css" />
     </head>