Browser: Better Mobile UI

[filips123]

Current UI is sometimes broken on mobile. Below are some screenshots of broken things.

---

Some top icons (for settings) are in the separate line which is not styled:

---

Text sometimes overflows screen:

---

Inputs sometimes overflow screen:

[cookiengineer]

Well, currently the UI kind of requires a minimum resolution of 500x... and it requires CSS media queries to work; can't influence that without a custom app that uses an own webview implementation.

What is your device resolution? Is it higher than 500px in screen width? If so, there might be some glitch with the <meta name="viewport"> as I've set it to be not user-scalable and to have always a scale of 1. Not sure whether all mobile browsers respect that setting correctly.

I could probably cheat around that behaviour with the CSS zoom: x.y property, but this would cause so many other problems (especially with context menu, tabs, sidebars etc.) that it's a very bad idea.

[filips123]

I tested this with Huawei P20 which isn't so small phone 🙂.

I've used Chrome for Android in PWA mode and I've got screen.width = 360 and screen.height = 748 in developer tools.

[cookiengineer]

Huawei P20

Hm... gsmarena says that the actual display resolution is 1080 x 2240 pixels, 18.7:9 ratio (~429 ppi density) so I guess something's wrong with my assumption that scale=1 is actually a 1:1 translation to real pixels.

Could you check what the window.devicePixelRatio value returns?

[filips123]

@cookiengineer Yes, this is weird. window.devicePixelRatio returns 3.

[cookiengineer]

The devicePixelRatio = 3 actually makes sense, as the window.innerWidth * 3 is the actual display resolution then.

What happens if you change the browser/index.html's viewport meta tag like this:

-		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
+		<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

(removing the width=device-width entry)

[filips123]

It is still same.

[cookiengineer]

Okay, after reading the css-device-adapt specification I guess the behaviour that is wanted for the Stealth Browser is this:

<meta name="viewport" content="user-scalable=no">

... because this will actually lead to the correct behaviour when navigating around, and will render the UI in the scale factor that is given by the device. If I'm gonna implement a zoom functionality, it has to be applied to the iframe anyways; instead of the rest of the user interface, so I guess the CSS zoom factor will then be modifiable via overridden shortcuts or gestures.

[cookiengineer]

I pushed the fix to X0, and so far with testing this seems to be the wanted behaviour for the user interface. It works on my legacy Android 4.4 that has a device pixel ratio of ~2.3 and with the device emulator in Chrome (which apparently just sets different zoom levels based on its profiles).

Can you confirm that the UI looks not so broken on your mobile?

[filips123]

Icons and now in one line and text has no overflows.

But I now think that the icons are too small and it is hard to click them.

[cookiengineer]

What I don't understand in the screenshot is the relation between font-sizes. The baseline for all fonts is 16px font-size, and it's inherited by the article element in the iframe.

Yet the radio elements in the settings are rendered in a completely different size compared to the surrounding content.

Honestly I have no idea on how to fix this without messing up the rest of the codebase. Maybe with some setting for UI scale that then is applied via zoom on the UI elements in the header/sidebars!?

Gotta think about this one a bit.

[cookiengineer]

It took a very long while, but I've implemented a new UI today.

The new UI will blend in a toggle button once the screen width is too small to fit in all the UI elements, which will toggle the Tab sidebar and the additional settings as an overlay.