[FEAT] Mobile mode

[thib-d]

Is this a new feature request?

• I have searched the existing issues

Wanted change

Hi,

When accessing a website from a phone, the resolution remains at 1024×768 with 96 DPI, so the site doesn’t switch to mobile mode.

Is there a configuration I might be missing?

Reason for change

Adjusting the resolution, DPI, and/or user-agent detection would ensure proper mobile rendering. This would improve usability, testing accuracy, and compatibility when simulating mobile devices.

Exemple of website with bad view (PC view): https://account.microsoft.com/account

Proposed code change

No response

[github-actions]

Thanks for opening your first issue here! Be sure to follow the relevant issue templates, or risk having this issue marked as invalid.

[thelamer]

how would you propose implementing this on a desktop version of firefox?

[thib-d]

With a desktop Firefox:

With a desktop Firefox with bigger windows:

Even on desktop Firefox, websites switch to a mobile layout when the window width drops below a certain breakpoint. The problem is that the emulated X screen resolution is larger than the target phone’s resolution, so the website never switches to mobile mode.

A potential solution could be to adjust the browser’s resolution and DPI to match the target device’s values.

How to reproduce:
1. On your physical phone, open https://www.mydevice.io/ and note the values for screen.width, screen.height, and DPI (reported by JavaScript).
2. Open the same site in Firefox running inside the Docker/X environment.
3. Compare the reported values. You’ll see that they differ significantly (and higher).

Expected behavior:
The values reported by Firefox in the container (screen.width, screen.height, DPI) should match those of the target device to properly trigger responsive layouts.

[thelamer]

what are you talking about? Are you running the latest container ?

hiDPI off (canvas scaling clientside):

hiDPI on with 250% UI scaling:

All scaling working all information being reported correctly by javascript in the browser.

There are many ways to skin this cat I just suspect you want hiDPI mode off.

[thib-d]

Yes, that’s exactly what I’m saying: the screen size reported via Docker-Firefox is very different from the actual device’s screen size. As a result, mobile mode doesn’t trigger on phones. Have you tried visiting https://account.microsoft.com/account or https://accounts.google.com/ from your phone using Docker-Firefox?
Did you get the mobile version of the site or the desktop version? I can only get the big resolution mode
Without hiDPI mode the website is not working (I only see a small area of it )

I use the arm64v8-1.2404.1 version

[thelamer]

I think you are just not understanding the UI scaling you have 200% set clearly and your own screenshots show that.
1504 times 2 is 3008
Play with the settings a bit more, everything is working like it should be, if you turn off hidpi while having 200% set that would make it "too small".
The UI scaling is persistent and requires the app to be restarted, it also might not be reflected in the client as that is not really tied together we set it via xrdb and xresources.
Your device might be 300% dpr (device pixel ratio) just land on that same page you are testing with in a normal web browser on your device and note the css pixel ratio.

We give you the knobs it is up to you how to use them.

[thelamer]

Closing as there is not a bug here.
hiDPI being default is intentional and it is like this to show users the pixels they could have, if they want to go back to legacy solutions they can simply flag it off and the screen will be scaled with css like a normal webpage, but this will introduce anti aliasing artifacts as depending on how hi res your mobile screen is it may be scaling the content up to 300% and if your panel is 4k you are only getting 1920x1080 of pixels.

Previous remote desktop solutions could literally not do this if you try to push 2k or 4k of pixels to a mobile device using a typical VNC protocol the whole thing falls over on itself and it is a slideshow while the battery explodes on your device. We can push the screen under 10mbit bandwidth at 60 fps to mobile devices without them even getting warm.

The system of setting the UI scaling and restarting the app is not perfect (the title bars don't scale until the whole container is restarted) and optimally everything would just be instantly apparent to the user. But that is just an inherent weakness of Linux I cannot develop around it.

I do not want to automate everything, I want users to understand that they have a 2k or in some cases 4k resolution panel in their pockets, I want users to tweak the knobs to their liking and have a fundamental understanding of what is happening.
Basically I want to support low tech users up until a point, learn how to use this protocol or fork it and make it your own.

[polatrk]

Hi,
I'm working with @thib-d on this. The goal would be to switch to mobile version (by adjusting the DPI and resolution) automatically. Right now, on mobile, the DPI stays at 96 and the resolution is the window's size (while on mobile the resolution is usually the screen size).

When on mobile, it should set the DPR to the one of the device (usually 2.5-3) and the resolution to be the screen size.
See the screenshots below.

On the container's firefox:

Directly on safari:

The docker firefox UI Scaling is set at 300% because my phone's DPR is 3. See on the screenshot they are both at DPR 3 but the resolution is different.

[thelamer]

Again I cannot replicate this.

Native Pixel 8 screenresolution.com:

Selkies 300% ui scaling:

Also the initial report of this issue was that websites were not clipping to a mobile mode which clearly in your above example it still would.