Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 15:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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

Browse source 
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2025-10-20 03:11:02 +03:00
parent 59df6aad05
commit 5df4efd7ba
6 changed files with 34 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/components/boards/boardBody.css
View file

@ -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;

9
client/components/boards/boardsList.css
View file

@ -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;

3
client/components/lists/list.css
View file

@ -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;

6
client/components/main/header.css
View file

@ -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;
}

6
client/components/main/layouts.css
View file

@ -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);

22
client/lib/utils.js
View file

@ -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) {