On the subject of optimizing for the Librem 5's screen


#1

I’m probably going to out my ignorance here, but I don’t know the answer to this question. So I thought i’d give this a shot.

There’s a news post about app compatibility on the phone, and much of the emphasis seems to be focused on how well they display. It occurred to me that if I take my computer monitor and turn it sideways, switch to portrait mode in the display settings, and then adjust my resolution to be as close as I can get to the Librem 5’s, I’ll pretty much have a giant phone screen. In this orientation, apps and programs seem to adjust themselves to the new resolution fairly well, at least as far as staying within the constraints of the monitor is concerned. I can run apps and programs in fullscreen mode or even maximized, and they’ll fit themselves to my screen.

So with this in mind, I guess the question is how is that different on the phone? Can it not just be set to portrait mode by default and let the OS handle everything? Or does the issue lie more with spacing everything out properly as opposed to going off the side of the screen as seen in some of the videos posted around here? Or am I missing something completely?


#2

Here’s a thought experiment (or a real experiment): Take an existing mobile phone and visit random web sites that don’t offer a dedicated mobile web site. Some web sites work well. Some well enough. Some don’t work very well. Some are unusable.

Some you end up doing a lot lot lot of scrolling but it kinda works. Some things end up being too small to be usable. Some you have to do a lot of zooming and the result is near unusable.

I am not expert in this area but I think some layout may be done by pixels, some by real-world units and some by percentage of screen/window size. Some layout has components laid out relative to each other or floating, some is absolute.

I would expect that the result for random “applications” is the same as the result for random web sites i.e. mixed results.

I’ve had desktops/laptops boot up in “VGA” mode (due to major config, driver or other problems) and found some applications are just not usable i.e. don’t adapt adequately to a 800x600 (?) screen. Admittedly phones these days are better than that.

PS Some computer monitors actually support rotating into portrait mode, mine not though. Some laptops can avoid having any connectors in use on the “bottom side”, some not. So “turn it sideways” may be hairy for some people.


#3

“Turn it sideways” assumes that one’s monitor is able to be rotated 90 degrees, as mine is. I grant that not everyone’s can do that, but that is ultimately irrelevant.

My question is, what’s to prevent the devs from just treating the phone screen as a portrait-mode desktop monitor and opening apps maximized? Or if an app needs to be landscaped, then open it landscaped so the user can rotate the phone? I’m sure there’s a reason it’s not that simple, I just don’t know what that reason is.


#4

The main reason why your experiment does not work is because of scaling.
You would have to set your screen to half the phone resolution, which would be 360x720. Or convince your desktop environment to display everything at double size:


#5

Or buy a really small HDMI monitor for testing. I think you can buy a 7" HDMI monitor for the Pi. Not sure on the native resolution but you should be able to set it down if need be.


#6

Ah, I see. In the same way that 4k on a 15.6 inch screen makes everything too tiny to be useful, yes? 720p-ish on a 5 inch screen is probably similarly unuseable.


#7

Small screens work fine for me; I find that my 1080p 5 inch phone screen works great for small text. It is nice to view full desktop size without needing to zoom in to avoid pixelation.


#8

From what I gather from what @caliga said about scaling, the issue is in pixel size versus quantity and how an app or program can or can’t adapt to that.

For example, your phone screen has 1080 pixels across the short side of your screen, which we’ll say is 4 inches for simplicity’s sake. My monitor has 1080 pixels across it’s short side, which is, we’ll say again, 13 inches. Our pixel sizes are different, and so an app or program has to be able to adjust accordingly. A lowercase L on my monitor might be, I dunno, 10x2 pixels, whereas on yours it’s maybe scaled to triple that, so 30x6. Because your phone’s pixels are smaller than my monitor’s, this scaling is necessary to keep the text big enough to be legible. Everything else gets scaled too, and evidently it’s a bit of work to get everything to scale and orient properly when this scaling does occur.

This is all a somewhat-educated guess on my part, but I think that’s what the issue is.


#9

The “scaling” itself is not really the problem. The libraries handle that.
To be legible, the whole UI layout on a high-DPI is upscaled(*) to use four times as many pixels (double width and height)
(*) may be the wrong term. It’s not really scaled like in a photo-editor, as that would be blurry and not look better than a low-DPI display.

As a result, the window occupies four times as many pixels.
To simulate that on a normal screen, either cut the resolution in half, or just use the top left quarter of the screen. Or have a centered wallpaper with 360x720 and align the window on it.

If the application cannot be constrained to that size or cannot be used nicely, then it needs to be made adaptive, to present the content differently when screen space is limited.

In the development chronology you can find several updates on that work, for example this one:


#10

That fits my brain’s definition of “scaling,” uneducated though it is. I see it’s more technical than I had surmised, but regardless I see your point and appreciate the explanation. There’s more to it than just adjusting size and orientation.