Improve Android phone detection

README.md

@@ -85,10 +85,13 @@ The UX principle is to keep the performance flow visible at all times and hide l
 
 Phones use the same application and backend as desktop browsers. A compact,
 touch-oriented layout is selected from viewport and pointer capabilities rather
-than device names. The phone surface contains only the virtual keyboard, a
-small live-status message, and the captured/generated piano rolls. Configuration,
-accounts, memory inspection, hardware MIDI, and device routing remain available
-in the unchanged desktop/tablet layout.
+than device names. Detection combines the current viewport, mobile browser
+client hints, touch-pointer capability, and physical CSS screen dimensions so
+Android phones still select the phone surface when the browser reports a
+desktop-sized viewport. The phone surface contains only the virtual keyboard,
+a small live-status message, and the captured/generated piano rolls.
+Configuration, accounts, memory inspection, hardware MIDI, and device routing
+remain available in the unchanged desktop/tablet layout.
 
 Phone interaction is deliberately automatic:
 
@@ -104,6 +107,9 @@ Phone mode is intended for playing and listening. Use the desktop/tablet layout
 when you need session management, model settings, memory inspection, MIDI
 hardware, or sound routing.
 
+For troubleshooting, append `?layout=phone` to force the phone surface or
+`?layout=desktop` to force the complete interface.
+
 ## Saving Session MIDI
 
 The Session panel includes `Save Session MIDI`.

frontend/app.js

@@ -18,6 +18,7 @@ const VIRTUAL_KEYBOARD_DESKTOP_OCTAVES = 2;
 const VIRTUAL_KEYBOARD_PHONE_OCTAVES = 1;
 const PHONE_LAYOUT_MEDIA_QUERY =
   "(max-width: 640px), (pointer: coarse) and (max-height: 500px)";
+const PHONE_SCREEN_MAX_CSS_PX = 700;
 const VIRTUAL_KEYBOARD_DEFAULT_BASE_NOTE = 60;
 const VIRTUAL_KEYBOARD_MIN_BASE_NOTE = 24;
 const VIRTUAL_KEYBOARD_MAX_BASE_NOTE = 96;
@@ -1613,7 +1614,33 @@ function virtualKeyboardOctaves() {
 }
 
 function isPhoneLayout() {
-  return Boolean(window.matchMedia?.(PHONE_LAYOUT_MEDIA_QUERY).matches);
+  const requestedLayout = new URLSearchParams(window.location.search).get("layout");
+  if (requestedLayout === "phone") {
+    return true;
+  }
+  if (requestedLayout === "desktop") {
+    return false;
+  }
+
+  const responsiveMatch = Boolean(
+    window.matchMedia?.(PHONE_LAYOUT_MEDIA_QUERY).matches,
+  );
+  const mobileClientHint = navigator.userAgentData?.mobile === true;
+  const coarseTouch =
+    Boolean(window.matchMedia?.("(pointer: coarse)").matches) ||
+    navigator.maxTouchPoints > 0;
+  const screenDimensions = [window.screen?.width, window.screen?.height]
+    .map(Number)
+    .filter((value) => Number.isFinite(value) && value > 0);
+  const compactPhysicalScreen =
+    screenDimensions.length > 0 &&
+    Math.min(...screenDimensions) <= PHONE_SCREEN_MAX_CSS_PX;
+
+  return (
+    responsiveMatch ||
+    mobileClientHint ||
+    (coarseTouch && compactPhysicalScreen)
+  );
 }
 
 function syncPhoneLayout() {

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Web Continuator</title>
-    <link rel="stylesheet" href="/assets/styles.css?v=20260729-phone2" />
+    <link rel="stylesheet" href="/assets/styles.css?v=20260729-phone3" />
   </head>
   <body>
     <div class="page-aura"></div>
@@ -1196,6 +1196,6 @@
       </section>
     </main>
 
-    <script type="module" src="/assets/app.js?v=20260729-phone2"></script>
+    <script type="module" src="/assets/app.js?v=20260729-phone3"></script>
   </body>
 </html>