Have all iPhone use mobile view by default, while still having possibility to use mobile/desktop switch button for desktop mode.

Thanks to xet7 !

client/components/boards/boardBody.css

@@ -294,7 +294,8 @@
   min-width: 100%;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .board-wrapper {
     width: 100% !important;
     min-width: 100% !important;

client/components/boards/boardsList.css

@@ -383,7 +383,8 @@
        screen and (max-device-width: 800px),
        screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
        screen and (max-width: 800px) and (orientation: portrait),
-       screen and (max-width: 800px) and (orientation: landscape) {
+       screen and (max-width: 800px) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .board-list {
     height: 100%;
     overflow-y: auto;
@@ -469,7 +470,8 @@
        screen and (max-device-width: 800px),
        screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
        screen and (max-width: 800px) and (orientation: portrait),
-       screen and (max-width: 800px) and (orientation: landscape) {
+       screen and (max-width: 800px) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .wrapper {
     font-size: 2em !important; /* 2x bigger base font size for All Boards page */
   }
@@ -769,7 +771,8 @@
        screen and (max-device-width: 800px),
        screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
        screen and (max-width: 800px) and (orientation: portrait),
-       screen and (max-width: 800px) and (orientation: landscape) {
+       screen and (max-width: 800px) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .wrapper {
     overflow: hidden;
     height: 100vh;

client/components/lists/list.css

@@ -765,7 +765,8 @@ body.list-resizing-active * {
   align-items: initial;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .mini-list {
     flex: 0 0 60px;
     height: auto;

client/components/main/header.css

@@ -342,7 +342,8 @@
     }
 
     /* Make zoom input wider on all mobile screens */
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
       #header-quick-access .zoom-controls .zoom-input {
         min-width: 50px !important; /* Wider on mobile */
         width: 50px !important; /* Fixed width to show all numbers */
@@ -452,7 +453,8 @@
   margin: 6px 5px 0;
   width: 12px;
 }
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   #header #header-main-bar {
     height: 40px;
   }

client/components/main/layouts.css

@@ -470,8 +470,10 @@ a:not(.disabled).is-active i.fa {
    MOBILE & TABLET RESPONSIVE IMPROVEMENTS
    ======================================== */
 
-/* Mobile devices (up to 800px) */
-@media screen and (max-width: 800px) {
+/* Mobile devices (up to 800px) and all iPhone models */
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
   #content {
     margin: 1px 0px 0px 0px;
     height: calc(100% - 0px);

client/lib/utils.js

@@ -433,10 +433,14 @@ Utils = {
   // we can easily debug with a small window of desktop browser. :-)
   isMiniScreen() {
     this.windowResizeDep.depend();
+    // Also depend on mobile mode changes to make this reactive
+    Session.get('wekan-mobile-mode');
+    
     // Show mobile view when:
     // 1. Screen width is 800px or less (matches CSS media queries)
     // 2. Mobile phones in portrait mode
     // 3. iPad in very small screens (≤ 600px)
+    // 4. All iPhone models by default (including largest models), but respect user preference
     const isSmallScreen = window.innerWidth <= 800;
     const isVerySmallScreen = window.innerWidth <= 600;
     const isPortrait = window.innerWidth < window.innerHeight || window.matchMedia("(orientation: portrait)").matches;
@@ -445,13 +449,19 @@ Utils = {
     const isIPad = /iPad/i.test(navigator.userAgent);
     const isUbuntuTouch = /Ubuntu/i.test(navigator.userAgent);
 
-    // For iPhone: always show mobile view regardless of orientation
-    // For other mobile phones: show mobile view in portrait, desktop view in landscape
-    // For iPad: show mobile view only in very small screens (≤ 600px)
-    // For Ubuntu Touch: smartphones behave like mobile phones, tablets like iPad
-    // For desktop: show mobile view when screen width <= 800px
+    // Check if user has explicitly set mobile mode preference
+    const userMobileMode = this.getMobileMode();
+    
+    // For iPhone: default to mobile view, but respect user's mobile mode toggle preference
+    // This ensures all iPhone models (including iPhone 15 Pro Max, 14 Pro Max, etc.) start with mobile view
+    // but users can still switch to desktop mode if they prefer
     if (isIPhone) {
-      return true; // iPhone: always mobile view
+      // If user has explicitly set a preference, respect it
+      if (userMobileMode !== null && userMobileMode !== undefined) {
+        return userMobileMode;
+      }
+      // Otherwise, default to mobile view for iPhones
+      return true;
     } else if (isMobilePhone) {
       return isPortrait; // Other mobile phones: portrait = mobile, landscape = desktop
     } else if (isIPad) {