(Bug report) Trilium detects desktop with touchscreen as mobile device

[ReinforceZwei]

Trilium Version

0.61.9-beta

What operating system are you using?

Windows

What is your setup?

Server access only

Operating System Version

Windows 10 21H2

Description

Text in tree is larger than usual when accessing on Web. Desktop is not affected. Tested on latest release (0.60.4) and beta (0.61.9) and both version have the issue.

Desktop (normal size)

Web

(Advanced option is shown even when mouse is not hovering on it)

Server setup

version: '3'
services:
  app:
    image: 'zadam/trilium:0.61.9-beta'
    restart: unless-stopped
    ports:
      - '8031:8080'
    volumes:
      - ./data:/data
    environment:
      - TRILIUM_DATA_DIR=/data

Error logs

No response

[Harsh3363]

Hi I wanna work on this issue please assign me this

[Sohailsaifi]

I can work on this. Can you assign it to me?

[rauenzi]

I believe the desktop app automatically sets the zoom level to 0.9 which makes everything appear smaller. That's not something that can be replicated on the web/mobile programmatically. So three four "fixes" would be

1. Stop setting the zoom level on desktop to 0.9 and adjust the css to keep the sizing the same
2. Set your browser zoom to 90%
3. Create web-specific css to adjust the sizing
4. See Zadam's answer below

[zadam]

What you're seeing is "mobile version" which has bigger tree navigation more suitable for touch.

Click on the "Switch to Desktop version":

[ReinforceZwei]

What you're seeing is "mobile version" which has bigger tree navigation more suitable for touch.

Indeed, the UI is back to usual after switching back to desktop mode.

However, it is weird that trilium shows mobile version while I am using desktop browser. I've tried Chrome and Firefox (and Incognito mode).

And I'm not able to recreate the issue on my other Windows 10 computer (using Chrome). Maybe the problem is on my computer. I'll try to investigate it.

[ReinforceZwei]

I saw Trilium detects mobile using navigator.maxTouchPoints. Since my desktop has a secondary monitor with touchscreen support, Trilium detects my desktop as a mobile phone and use mobile layout by default.

trilium/src/views/login.ejs

Lines 70 to 71 in bd7fa16

	function isMobile() {
	if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints > 0;

[zadam]

@ReinforceZwei makes sense, I removed the touch point condition