Just because I have a vertical screen, doesn't mean I'm on a phone!
css javascript · 10 comments · 700 words · Viewed ~31,180 times.
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.
Examples
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.
Problems
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 1080x1920. 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 720x1280.
User Agent "sniffing" is considered an antipattern and is discouraged. So most websites don't bother to check if I'm browsing on an iPhone or Android, instead, they use JavaScript or CSS to get my screen resolution.
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 1080x1920. 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 864x1536 - 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!
OK, there's no way to get the physical size of a user's screen. That functionality just doesn't exist in either JavaScript or CSS.
But you can get the Dots Per Inch (DPI). Well, sort of...
CSS allows you to get the DPI of the screen.
If I go to Lea Verou's https://DPI.lv/ I see that my monitor's resolution is correctly detected as 1080x1920! No matter what zoom level or font scaling I use - it is always the correct resolution.
JavaScript
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:
- Chrome: 5.14px/mm.
- Firefox: 4.73px/mm.
- Webkit: 3.78px/mm.
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.
Daemon says:
@edent says:
screen.widthto the correct value. I get1792which is my correct width. window.devicePixelRatio is 2, so thus why I get 3584x2240 (twice of what I have) I hear your complain, but I think the only way to play with websites is doing what apple is doing. Correcting screen.width and screen.height depending on how you scale your monitor. And the fact that it breaks for all apple hardware, is also a clue that this can't be used and apple seems to be correctly informing proper width, height and devicePixelRatio.Christopher Salisbury says: