This illustrates something that has been driving me crazy for years. It seems like more and more sites have modal floating elements at the top and bottom so my 1080 screen is only using a third of the available space for content, I hate to think what the internet must be like for people with 720 ultrabooks now. I've always assumed site designers are all using 4k screens and just can't believe people live without them anymore.
LeifCarrotson|2 years ago
I also have a 1920x1200 screen at work that I love, it's only 120 pixels taller and I honestly don't notice the difference much when in use, but when I push content over to the laptop screen or unplug, it's a huge loss.
I tried to find a 4:3 or 3:2 high-res screen, but even 2560 x 1600 (half as many pixels as my 4k, only 16:10) was more than double the cost of 16:9. I could not find any affordable displays with a non-widescreen aspect ratio.
And now I'm part of the problem, having signaled to the panel OEMs that I want 16:9...
moritzwarhier|2 years ago
Comments on this except for the one mentioning vh honestly don't reflect current web dev + design reality anymore. And even then, you probably want to consider dvh vs vh depending on what you are doing (of course you don't want your whole layout to shift because of the on-screen keyboard either)
But they reflect mistakes that bad designers make all the time.
When I was doing web dev, it was mostly like this: there are two mock-ups, one for 1920x1080 and one for the viewport of the latest iPhone or sth similar.
The rest was up to the skill and interpretation of the developer.
To a degree, this is a sane approach, because as a web dev, it is your job to understand this and tweak things to look good regardless of DPR and viewport size in CSS pixels.
If you want to design the perfect landing page, you will encounter all kinds of tradeoffs depending on viewport dimensions. But it can be fun to tackle this problem.
JaumeGreen|2 years ago
moritzwarhier|2 years ago
Also, 14" notebooks such as the MacBok Pro are notorious in their own right, they have a viewport width of about 1300 CSS "pixels" and about 2560 physical pixels on the horizontal axis (DPR around 2).
Many web devs fail to consider DPR in their media queries. Plainly speaking, a 14" MBP has less "CSS pixels" than a cheap 14" laptop with 1920x1080 physical pixels and a DPR of 1.