Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

shkspr.mobi

Post reply on HN
Print view View original

191–200 of 399 posts

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

#191

Post by brundolf »

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 (note that this isn't a question of increasing pixel-density on phones; "CSS pixels" are virtualized to approximate the same physical size across devices, though they get affected by display-scaling too).

So IMO it just comes down to some sites doing a bad job of picking responsive breakpoints.

Edit: Out of curiosity I checked MDN, and their media query tutorial has you set the mobile breakpoint at 40em. Default font size at least on desktop is 16px (again, virtual pixels which scale with display-scaling and device size), which comes out to a breakpoint width of 640px: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

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

#192

Post by aimor »

I remember learning how to get my site to display decently on different screen sizes. I got an abridged history of past attempts: "handheld" CSS media type, then media features "device-height/width, resolution, pointer, orientation, aspect ratio", some people try to use the User Agent, others target a huge list of specific device resolutions, webkit has a device pixel ratio?, it all seemed like a huge mess.

Then it turns out the solution isn't CSS it's the HTML "meta" tag:
On top of that I use media queries to respond to the font size.

    @media (max-width: 35rem)
I'd love to know if there's a better way, but this has been pretty good for me.

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

#193

Post by jrockway »

nobleach wrote: post #93
dahfizz wrote: post #59

Earlier quoted context omitted.

The real real problem is that so many sites overcomplicate their design. HN works beautifully on any window / screen size.

Sure. Now let's say you're shopping for a brand new rug for your living room. Are you going to buy it from a site the looks like HackerNews? If so, I'd venture to say you're in the minority. A used rug from Craigslist, perhaps, but a brand new rug costing hundreds, you're going to want a site that looks VERY professional.

Amazon is a design garbage bin, but it doesn't seem to be reducing their sales.

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

#194

Post by jfk13 »

oblio wrote: post #181
teddyh wrote: post #162

Earlier quoted context omitted.

You mean 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀?

There is no formatting support for it, it seems you can use Unicode bold formats or something. Doesn't seem approachable or trivial...

Yes, I know people do things like that (mostly on Twitter, it seems), but I wouldn't recommend it; it'll interfere with searchability, copy/paste, etc., and generally make the text less interoperable. The mathematical alphabets in Unicode are intended for specific technical uses where the typeface is an inherent part of the symbol's identity, not for styling normal text.

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

#195

Post by iamben »

DangerousPie wrote: post #135
iamben wrote: post #77

Earlier quoted context omitted.

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.

If desktop + mobile make up >95% of your audience it's hard to justify the cost of creating a third set of rules for the rest.

I like to start on the desktop but build in a way I know the objects will flow. Then I set up a tester with a bunch of breakpoints and check as I go and make micro adjustments to each element that is "off". Then you can set the element inspector to the side and just keep shrinking the screen to make sure nothing is awry as the width gets less and less. I don't really have X sets of 'rules', just elements adjusting at the point it feels right to adjust them.

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

#196

Post by egypturnash »

egypturnash wrote: post #99

The “solution” he gives for website devs is to “stop naively using screen resolution”. But the thing is, an iPhone 12’s resolution is 2532‑by‑1170-pixel at 460 ppi - bigger than his 1080×1920.

And of course realistically he is probably seeing sites with breakpoints built entirely on min-width/max-width, which gives the size of the browser canvas.

The Guardian, for instance, has a lot of "@media (max-width: 71.24em)" in its CSS. Screen height? Zero fucks given. I turned my desktop monitor to portrait and I can change between desktop and phone versions by shrinking my desktop window and/or changing the font size. Which feels like a perfectly sensible way to tackle the problem if you are coming from a place where you are thinking in typography.

eat.co.uk? Tons of "@media print, screen and (max-width: 768px)". Screen height? What's that?

popsci.com? A lot of "@media screen and (max-width: XXXpx)", where XXX varies a lot - every number is different, the lowest is 325px and the highest is 1720, someone's been thinking about a lot of edge cases in that layout.

----

The fundamental problem of "I am getting the mobile site on my desktop" still applies, but his theories as to why are wrong.

Really I feel like he is sitting in the middle of a very small edge case. Not many people use portrait screens on their desktop. And of those people, how many are bumping the effective resolution by changing the scaling? Finding a solution that can work properly for him, and not fuck things up for people with failing vision (and maybe even run afoul of accessibility laws by doing that) is gonna be a lot of work for very little return, and he should just bump his font size down a little and live with that, or do some CSS injection on every single offending site if he has a lot of time to blow on this.

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

#198

Post by mywittyname »

prox wrote: post #178
iamben wrote: post #77

Earlier quoted context omitted.

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.

It's just plain hard to keep up with front-end tech. Most people use front-end dev work as an entry point. They quickly realize there are more sane jobs available on the backend and migrate there.

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

#200

Post by mywittyname »

freebreakfast wrote: post #164
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…

> The author's proposed solution is for sites to use DPI instead This is untenable as well. You'll end up with microscopic websites on high DPI phone screens.

This should result in the website knowing that the screen is 7" inches (dots-per-inch / dots = inches) across and setting the style for small devices.
Post reply on HN