This post also applies to basically any phone that runs Phosh, be it one of the many postmarketOS devices, or — naturally — the Purism Librem 5.
Following up to my blog post detailing my setup, I was asked how exactly I scale web apps like Element to somewhat work in Firefox on the PinePhone. As the same applies to other web apps (e.g. Discord, more on that in a future blog post), I figured I should make a dedicated blog post detailing how I do that, as simply executing
- does not cut it.
Scaling, generally (Normal apps)
First, let's reiterate how we can affect scaling generally in the GNOME on Mobile environment comprised of Phoc (compositor), Phosh (shell) and Squeekboard (virtual keyboard).
As not every app that might be useful does scale nicely out-of-the-box; meaning parts of the window will be off the screen and thus unreadable and untouchable.
There's a general "shotgun approach", that applies scaling to every app:
$ gsettings set sm.puri.phoc scale-to-fit true
I recommend a more nuanced approach as the global method can have negative side effects on optimized apps. This approach enables the forced scaling on a per-app-basis. To do that we need to have
scale-to-fit, and a script, which I usually name
get-app-id.sh and put in
~/.local/bin (which is in my PATH).1
#!/bin/bash WAYLAND_DEBUG=1 $1 |& grep 'xdg_toplevel@[0-9]\+\.set_app_id'
Just copy these two lines into a text file, e.g. named
get-app-id.sh, on your PinePhone and make it executable by running
$ chmod +x get-app-id.sh.
Let's say, you want to use KeePassXC, which does not scale well, but becomes somewhat usable by running
scale-to-fit. But you won't get there by running
$ scale-to-fit keepassxc on. You can now run
$ ./get-app-id.sh keepassxc and KeePassXC will start up. Go back to your terminal and you will find a line of text similar to:
[4049990.198] -> email@example.com_app_id("org.keepassxc.KeePassXC")
The part between the "" is what you are looking for. Just run
$ scale-to-fit org.keepassxc.KeePassXC in the terminal and the next time you start KeePassXC, it should be usable — or at least fit the screen.
The same works for Flatpak apps, as I've described in a previous blog post.
Scaling web apps/Changing phoc scaling
For web apps, this method does not work. We need to take another route, that scales every UI element down, and thus makes the interface work on the smaller phone screen. By default, on PinePhone and Librem 5, the UI scaling is set to 2.
In a the blog post "Easy Librem 5 App Development: Scale the Screen, Purism's Kyle Rankin describes a way to do this kind of scaling nicely via a graphical user interface. This "scale_screen" script is now part of a PureOS package called l5-goodies.
Dependencies for this script are wlr-randr, which is to Phoc (and other wlroots-based compositors) what xrandr is to Xorg, and yad (short for "yet another dialog"), a tool for creating graphical dialogs from shell scripts. They should be packaged in your distribution of choice.
With this, you can now easily make web apps like Element or Discord usable, the same applies to a few desktop apps. Just adjust the scaling until it fits your needs. For general help on web apps with Firefox, read my blog post about my PinePhone setup and watch my video "Firefox Profiles and Site Specific Browsers on the PinePhone" on PeerTube, Odysee or YouTube.
To see what's in your PATH and to learn how to add directories to your path, check out this HowToGeek.com article. Please note that you will also need the file as executable, which is done with
chmod +x FILENAME.