Improve viewport handling in mobile

MTG · Jan 22, 2024 · 25ae37c · 25ae37c
1 parent 5084b13
commit 25ae37c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/freesound/static/bw-frontend/src/utils/browser.js b/freesound/static/bw-frontend/src/utils/browser.js
@@ -2,8 +2,8 @@ import { UAParser } from 'ua-parser-js';
 
 const { browser, cpu, device } = UAParser(navigator.userAgent);
 
-const isIPad = () => {
-  return device.model === 'iPad';
+const isPhone = () => {
+  return device.type === 'mobile';
 }
 
 const isSafari = () => {
@@ -18,3 +18,17 @@ export const isDesktopMacOSWithSafari = () => {
     return isSafari() && !isTouchEnabledDevice();
 }
 
+function update_viewport_width_if_needed(){
+    const minWdth = isPhone() ? 1000: 600;
+    if (window.innerWidth < minWdth) {
+        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=0, initial-scale=0.8');
+    } else {
+        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=0');
+    }
+}
+
+update_viewport_width_if_needed();
+
+window.addEventListener("resize", function (event){
+    update_viewport_width_if_needed();
+});
diff --git a/templates/base.html b/templates/base.html
@@ -6,22 +6,6 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=0">
-    <script>
-        var isIpad = (/iPad/.test(navigator.userAgent))
-        var minWdth = isIpad ? 400:580;
-        function update_viewport_width_if_needed(){
-            var adjustedWidth = window.innerWidth / window.devicePixelRatio;
-            if (adjustedWidth < minWdth) {
-                document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=580');
-            } else {
-                document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=0');
-            }
-        }
-        update_viewport_width_if_needed();
-        window.addEventListener("resize", function (event){
-            update_viewport_width_if_needed();
-        });
-    </script>
     <meta name="theme-color" content="#000000">
     <title>Freesound{% if request.resolver_match.url_name != "front-page" %} - {% block title %}{% endblock %}{% endif %}</title>
     <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?">