Just because I have a vertical screen doesn’t mean I’m on a phone • Hacker News Board

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

#371

Post by Daho0n » Wed, Feb 03, 2021, 10:07 AM UTC

brundolf wrote: post #191

jefftk wrote: 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…

I would add to this that the specific sites in question have fairly unreasonable media-queries: The Guardian breaks to mobile at 980px, and Just Eat at 1024px . On my MacBook Pro with default scaling, these are both more than 50% the width of the monitor; i.e. if I size the window to half-screen, I'm in mobile mode on these sites. For reference, in sites I make I usually set the mobile breakpoint closer to 768px (not…

There's no more a "break to mobile at 980px" than a "break to mobile at 1140px", it's just the one you have a problem with. A responsive site scaling at multiple breakpoints isn't like switching to a mobile site just because it changes its "More" menu to a hamburger. The problem seems to be your choice of hardware coupled with your split-screen window size plus your want of three rows over two at a specific site; remove one and the problem goes away. To me The Guardian is scaling perfectly well and trying to paint it as switching to mobile is disingenuous. I'm amazed reading stuff like this at HN (well maybe not as most "hackers" can't design if their life counted on it). The Guardian is a good example of a perfectly well working responsive website.

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

#372

Post by madeofpalk » Wed, Feb 03, 2021, 10:22 AM UTC

neop1x wrote: post #362

22c wrote: post #335

Earlier quoted context omitted.

Am I missing something or do CSS media queries not solve this problem by providing an actual physical measurement? What's wrong with using something like: @media (min-width: 8in) To determine if someone is using a larger screen (or window)? Edit: https://hacks.mozilla.org/2013/09/css-length-explained/ Seems like 8in is just short-hand for 8*96px. Thanks for nothing, web standards.

w3c never wanted to implement physical units [1], saying OS are not reporting screen DPI reliably, etc. I understand they had to start with something and 20 years ago no one expected thre will ever be monitors with DPI > 96 but I don't understand why the situation hasn't changed yet. Now that we have many physical screen sizes with vastly varying densities. In my opinion, devices with a screen are like a sheet of pap…

I think you're conflating "bigger monitior", "higher resolution", and "high-dpi".

> But it is not uncommon to see a website on a huge hi-DPI monitor in such a way that a heading takes 1/4 of the screen height > if you buy a bigger monitor, everything just gets bigger, including most of fonts, unnecesarily.

I don't think this is the case at all? The web and browsers handle DPI scaling incredibly well. I don't think I've ever ran into an issue with it. Remember that Apple has been shipping high-DPI monitors for the past 15 years, and I've never experienced these issues of a website of a website not handling this. More or less, the browser completely abstracts this away - you have to purposefully screw things up to render things at different sizes depending on DPI.

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

#373

Post by iso1631 » Wed, Feb 03, 2021, 10:47 AM UTC

chungy wrote: post #231

klodolph wrote: post #214

Earlier quoted context omitted.

Fair, although back at the time they came out it meant something different. Mobile-optimized websites in 2008 were horrible, stripped-down things.

Isn't that still true in 2021? I haven't been particularly fond of the mobile view of most sites I come across. I force desktop-view on my phone fairly frequently just to get at features/pages I want.

Mobile websites pre 2008 tended to be WML over WAP. If they existed they were terrible, probably created by an intern once and not updated, because very few people used mobile phones for internet access (other than say linking their PDA or notebook to their phone via IRDA)

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

#374

Post by varjag » Wed, Feb 03, 2021, 11:04 AM UTC

jefftk wrote: 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…

> Sites are not detecting a portrait screen and deciding that they're displaying on a phone.

You wish!

A few years ago one website of a huge electronics component supplier did exactly that. I notified the webmaster, to which they responded that I represent a corner case in their new mobile-first strategy and it's a wontfix. However after politely inquiring how many of their customers source industrial supplies from their cellphones it was eventually reversed.

https://twitter.com/varjag/status/1050370136585187328/photo/...

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

#375

Post by blacklight » Wed, Feb 03, 2021, 11:15 AM UTC

@media screen and (max-width: 768px) and (orientation: portrait) { /your mobile CSS here/ }

Come on UX designers out there, don't be lazy and remember to always include the max-width/min-width attributes in your @media queries :)

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

#376

Post by _trampeltier » Wed, Feb 03, 2021, 11:30 AM UTC

varjag wrote: post #374

jefftk wrote: 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…

> Sites are not detecting a portrait screen and deciding that they're displaying on a phone. You wish! A few years ago one website of a huge electronics component supplier did exactly that. I notified the webmaster, to which they responded that I represent a corner case in their new mobile-first strategy and it's a wontfix. However after politely inquiring how many of their customers source industrial supplies from t…

Yeah, Distrelec .. I saw this too.

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

#377

Post by innocenat » Wed, Feb 03, 2021, 12:13 PM UTC

account42 wrote: post #363

DangerousPie wrote: post #308

Earlier quoted context omitted.

The tooling isn't the problem, time is. Every device and resolution you support takes time and at some point you hit a point of diminishing returns.

If it takes too much time, you are probably doing something wrong like having hardcoded layouts for different resolutions instead of using reflow as much as possible.

Even with all reflow it's hard. Should I reduce a width a little bit more so that it become 3 columns instead of 2 on iPad vertical at risk of having some line wrapped? Things like that.

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

#378

Post by badsectoracula » Wed, Feb 03, 2021, 12:37 PM UTC

jefftk wrote: post #247

badsectoracula wrote: post #242

Earlier quoted context omitted.

Uh, i wrote "viewport width is not the same as the monitor width", this is the same as what you wrote. As for why it is wrong, it is because you can't rely on it to make a Mobile vs Desktop distinction - i already provided an example why.

"Mobile vs desktop" is not a distinction websites should be making. Sites should make the best use they can of the available horizontal space. It's still not clear to me where you think this approach gives bad results?

The problem is that the horizontal space only tells you how many pixels are available, not how big whatever you use those pixels for ends up on the screen.

The precise vs coarse isn't helpful either for something like this because this isn't just about clicking vs tapping, it is about how the end result looks - and there are PCs with both very small monitors and very big monitors (and relatively large monitors with low DPI or small monitors with very high DPI). CSS pixels only help for setting sizes/positions, but not layout.

AFAIK the best that can be done nowadays is resolution media queries but that isn't available everywhere (at least according to caniuse).

Of course in practice i expect none of the above to be used and have my browser simply zoom out whenever i reach many sites just because i do not want to maximize my browser :-/

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

#379

Post by jefftk » Wed, Feb 03, 2021, 12:39 PM UTC

account42 wrote: post #368

jefftk wrote: post #233

Earlier quoted context omitted.

When people lay out desktop sites, 960px is the smallest common minimum design width. Many of these sites are statically laid out, and if rendered with the width of 949px would require horizontal scrolling.

> Many of these sites are statically laid out Which they shouldn't be.

Yes, if these sites were not statically laid out, and instead gracefully handled any size they happened to be rendered at, providing a viewport width of 949px would not be a problem.

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

#380

Post by jefftk » Wed, Feb 03, 2021, 12:51 PM UTC

neop1x wrote: post #362

22c wrote: post #335

Earlier quoted context omitted.

Am I missing something or do CSS media queries not solve this problem by providing an actual physical measurement? What's wrong with using something like: @media (min-width: 8in) To determine if someone is using a larger screen (or window)? Edit: https://hacks.mozilla.org/2013/09/css-length-explained/ Seems like 8in is just short-hand for 8*96px. Thanks for nothing, web standards.

w3c never wanted to implement physical units [1], saying OS are not reporting screen DPI reliably, etc. I understand they had to start with something and 20 years ago no one expected thre will ever be monitors with DPI > 96 but I don't understand why the situation hasn't changed yet. Now that we have many physical screen sizes with vastly varying densities. In my opinion, devices with a screen are like a sheet of pap…

The current situation is not a mess; it works pretty well:

* Manufacturers configure their devices to ship with reasonable default settings, where is CSS pixel is roughly the same apparent size for everyone.

* Users who want content to be displayed larger or smaller can change their device scaling, which then makes their CSS pixels larger or smaller.

* Web developers can write for CSS pixels, knowing the content will display at a reasonable size for the user.

> if you buy a bigger monitor, everything just gets bigger, including most of fonts, unnecessarily

It sounds like you're probably sitting closer to the monitor then expected? Lower your device scaling and things will be a better size in all programs including the web browser.

> on high-resolution screens there is sometimes big empty space on the left and right side because it is just "highest-width" media query and designers didn't expect you would have so many pixels horizontally

I think this is also running into user preferences and design. If I'm reading an article, and there is just one stream of text, I'm quite happy for it to take a 40em strip down the middle of my screen. If the text ran edge to edge it would be much harder to read, because it's hard to keep your place when jumping to the next line.