Live data from Hacker News

Just because I have a vertical screen doesn’t mean I’m on a phone

shkspr.mobi

171–180 of 399 posts

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#171
His proposed solution -- measuring screen size in physical display points -- is futile.

He writes it directly in his article:

> My monitor’s native resolution is [w × h device pixels]. But I find the fonts slightly too small at that resolution – given how far I sit from the screen. [So I use DPI scale factor R, what] translates to an effective screen resolution of [w/R × h/R virtual (CSS) pixels].

(In his case it is 1080 × 1920 / 1.5 = 720 × 1280). Measuring screen dimensions in physical display points, like

    var dppx = window.devicePixelRatio;
    var screenWidth  = screen.width  * dppx;
    var screenHeight = screen.height * dppx;
reveals nothing about your preferences and conditions.

The moment he decides to get another second vertical monitor and put both just a bit farther he will be back on the square one.

You may have super tiny device with super high density display close to your nose, look at a screen on opposite side of your room that can have same density (what would be a bit wasting resources, but anyway) or look at super large billboard screen across the road.

Until the page will know exactly: - how far is the screen from eye of its observer, - observer's eyesight conditions, - and observer's perceived visual size preferences, there will be no way to solve virtual pixel problem the way that will make everyone happy.

(And that's quite OK, I think.)

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#173
post #100

Earlier quoted context omitted.

>Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view. My experience has been the exact opposite of what you're saying. And the result is, 90% of the time, a site that goes from usable to unusable.

What viewport width are you providing in that case?

I typically go from width=1920 x height=1080 (or larger but with similar aspect ratio) to width=949 x height=1028

On many sites, this trigger the appearance of the dreaded hamburger menu.

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#174
post #48

Sites are not detecting a portrait screen and deciding that they're displaying on a phone. Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view. In this case the author is scaling their resolution, and so their browser is presenting itself to sites as 720px wide. Sites see that and show a layout optimized for a screen of that width. T…

This doesn't address the author's central argument, which is that websites need an effortless way of letting fonts become bigger without affecting the entire layout. I've wanted it too. I don't really care if some text gets cut off on headers and looks weird, I just want to read stuff from the comfort of my bed with my laptop a few feet away.

FYI desktop Firefox has "Zoom Text Only" feature.

    View > Zoom > Zoom Text Only
On mobile: all browsers have "force enable zoom" + test scaling in accessibility settings; Additionally Opera supports reflow on zoom (Settings > Text options > "Text wrap").

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#175
> that can leave some sites too small to read properly. I need to zoom out the page

Well, then all I can say is that the CSS breakpoint is doing its job perfectly. It switches to layout you can read at this (emulated) screen size. There is nothing to fix.

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#176
post #64

Ironically, the author of dpi.lv ( https://lea.verou.me/ ) doesn't even bother to have a "desktop-friendly" site. On desktop everything (font, header, images, buttons) is huge and ~50% of the vertical space is wasted. Not the best calling card for someone living "at the bleeding edge of web standards". Or maybe it looks Ok if you view it on a Mac?

It looks fine on mobile to me, scrolling is free, and filling 100% of the screen with information has nothing to do with if a person is "at the bleeding edge of web standards".

That's my point, it looks (probably?) great on mobile, but on desktop it's a mess. Maybe that's what they mean by "bleeding edge" - only that it's the eyes of some of the users doing the bleeding...

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#177
post #61
post #48

Sites are not detecting a portrait screen and deciding that they're displaying on a phone. Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view. In this case the author is scaling their resolution, and so their browser is presenting itself to sites as 720px wide. Sites see that and show a layout optimized for a screen of that width. T…

Agreed completely. One mistake that designers/developers do though is to completely give up under 1000px so we get this swaths of whitespace and a hamburger. That’s a waste of estate and a waste of my time.

For some reason people adopted 1040px-1080px as a default - I think it’s twitter Bootstrap’s fault. 980 or even less is much more reasonable.

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#178
post #77
post #61

Earlier quoted context omitted.

Agreed completely. One mistake that designers/developers do though is to completely give up under 1000px so we get this swaths of whitespace and a hamburger. That’s a waste of estate and a waste of my time.

Yeah, I still very often get "here is the desktop design, here is the mobile design". Depending on who is developing the designs depends how that's going to translate. I have all the time in the world for developers that reflow the page and remove/adjust elements at different breakpoints (based on the design) between 'desktop' and 'mobile' so the experience is good for everyone. Sadly, most people don't bother.

I believe true webdesigners are in decline. You have lots of people who do this as a side gig after reading a few tutorials. In a way that’s a nice compliment for the accessibility of the tech, but not accessibility for the end user.

Same with “We only tested this on Chrome.” of sites/apps, of which are there are many, as I can attest, as I never use Chrome.

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#179
post #48

Sites are not detecting a portrait screen and deciding that they're displaying on a phone. Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view. In this case the author is scaling their resolution, and so their browser is presenting itself to sites as 720px wide. Sites see that and show a layout optimized for a screen of that width. T…

Yes, and webdevs have been trying for over 10 years now to figure out how to get this right. Has no one just stopped to consider having a browser send a `prefersMobileView` or `viewport:phone` or anything like that? I can remember back a few years ago, an iPhone 6+, turned sideways could get a desktop view on some sites... simply because it met the requirements set by the author. Now, the author's assumptions were wr…

One of the original selling points of the iPod touch/iPhone was that it could display full desktop websites...

Re: Just because I have a vertical screen doesn’t mean I’m on a phone

#180

I don’t think this has much to do with your vertical screen as much as it’s the narrow viewport.

Absolutely. When I read the headline, I frowned, because I’d call it quite rare for sites to mishandle my 1080×1920 displays, though not unknown.

But then I read to “720×1280”, and… well of course, what did you expect?

Post reply on HN