use more precise detection of a mobile browser, fixes #3680

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trilium",
-  "version": "0.58.8",
+  "version": "0.59.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "trilium",
-      "version": "0.58.8",
+      "version": "0.59.1",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {

src/views/login.ejs

@@ -52,8 +52,7 @@
         device = "mobile";
     }
     else {
-        // mobile device detection based on https://stackoverflow.com/a/24600597/944162
-        device = /Mobi/.test(navigator.userAgent) ? "mobile" : "desktop";
+        device = isMobile() ? "mobile" : "desktop";
     }
 
     console.log("Setting device cookie to:", device);
@@ -66,6 +65,19 @@
 
         document.cookie = name + "=" + (value || "")  + expires + "; path=/";
     }
+
+    // https://stackoverflow.com/a/73731646/944162
+    function isMobile() {
+        if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints > 0;
+
+        const mQ = matchMedia?.('(pointer:coarse)');
+        if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;
+
+        if ('orientation' in window) return true;
+
+        return /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(navigator.userAgent) ||
+            /\b(Android|Windows Phone|iPad|iPod)\b/i.test(navigator.userAgent);
+    }
 </script>
 
 <link href="<%= assetPath %>/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">