I’m a weirdo – I fully admit that. As part of my home working set up, I use a vertical monitor. I read and write a lot of long documents – and this form factor suits me perfectly.
I’ve been doing this for a long time. It is a natural part of my workflow. For anything longer than an email, it’s the perfect orientation. Most Linux apps work just fine like this – although menu buttons tend to hide behind overflows.
Websites though, ah! That’s where the problem begins. Lots of websites think “Vertical Screen == Mobile User”!
This is a minor problem – and one of my own making – but I thought it worth explaining the problems it brings, why it occurs, & how to stop it.
Here are some typical websites viewed on my 24″ vertical monitor. On the left if how it renders, and on the right how it should render.
Generally, there are several problems I encounter:
- Navigation is hidden behind a burger / ☰ menu.
- Some elements, like carousels, only work with touchscreen controls.
- Images are served as low resolution, for 6 inch screens and then blown up to 24 inches.
- Lots of wasted space taken up with “hero images” and finger-friendly buttons.
- Some content simply not available to mobile users.
Why this occurs
My monitor’s native resolution is 1080×1920. But I find the fonts slightly too small at that resolution – given how far I sit from the screen. I use Pop_OS Linux, which lets me scale the fonts rather than the screen resolution.
A scale factor of 1.5 translates to an effective screen resolution of 720×1280.
They – somewhat reasonably – see a 720p screen in a vertical orientation and assume it is a small screen device.
How to tackle this (user side)
Zoom out! That’s the obvious answer. If I hit CTRL+- 3 times, my resolution becomes 1080×1920. But that can leave some sites too small to read properly. I need to zoom out the page, and zoom in the font.
I have tried “Fractional Scaling” – it works OK on Wayland, but leaves all the fonts looking soft and fuzzy.
So I’ve set my font scaling to 1.36, which gives me a resolution of 864×1536 – which is enough to stop most sites assuming I’m on a tiny mobile phone.
But this shouldn’t be my problem to solve.
How to tackle this (website side)
STOP NAÏVELY USING SCREEN RESOLUTION!
But you can get the Dots Per Inch (DPI). Well, sort of…
If I go to Lea Verou’s https://DPI.lv/ I see that my monitor’s resolution is correctly detected as 1080×1920! No matter what zoom level or font scaling I use – it is always the correct resolution.
var dppx = window.devicePixelRatio; var screenWidth = screen.width * dppx; var screenHeight = screen.height * dppx;
That’s how you get the real resolution, unencumbered by whatever the OS is doing to the scaling.
If I go to a different DPI detector, I can see exactly how many pixels there are per inch. My vertical monitor is detected as 120px/inch.
This isn’t quite right. And different browser engines calculate this differently. On Linux, I got these results with the three main rendering engines:
When I physically measure the screen, it’s about 3.62px/mm!
Obviously that’s not incredibly accurate – but it is useful in giving a web developer a rough idea of physical screen size.