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

321–330 of 399 posts

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

#321

Post by tshaddox »

asddubs wrote: post #215
nobleach wrote: post #89

Earlier quoted context omitted.

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…

IMO the best solution is to just have natural breakpoints (i.e. when a part of the design of the given page would cease to work, add a breakpoint to change the format of that component, rather than at predefined points) and then for logged in users have an option to request the desktop design, which you can do by simply setting a viewport to 1000px width and leaving everything else unchanged what would be really nice…

That sounds similar to a CSS proposal called container queries, which has been a much-requested feature for many years. Currently the only native way to do responsive design is to make styling changes based on attributes of the viewport (like width). But like you say, it would be nice to have dynamic layouts for every individual component of a website. Container queries do that.

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

#322

Post by jzer0cool »

Sounds like a quick hack from developers. I'm guessing here maybe some fluid, generalized mobile design for a vertical layout. When developing for front-end I like to simply see how my layout may look generally with a horizontal / vertical view but with a responsive layout in mind and not necessarily mobile resolution.

I could see how someone might put in a quick, unideal hack and do a scaled to fit. I'm curious how often people are seeing this as I don't have a vertical monitor setup anymore.

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

#323

Post by slowwriter »

Look, I don’t think it’s unreasonable to assume that a 720px wide device is a phone. As a webdev I completely zoned out when he started talking about DPI and such. Nobody is going to completely change their methodology around breakpoints because of like a .01% edgecase, when the current one works great the remaining 99.99% of the time.

The reason I consider this a true edgecase is that he combines a vertical orientation of the monitor with scaling. That is just bound to cause problems. Had the width been 1080px most websites would at least have given him the tablet layout, which would be more usable on a desktop monitor.

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

#324

Post by jessriedel »

aembleton wrote: post #267
jessriedel wrote: post #250

Earlier quoted context omitted.

Why don't browsers tell the server whether the user has a touch screen? This seems like a perfectly reasonable thing that the website should know before delivering the page, and users who are hyper privacy focused could toggle a setting to not send this info.

A touch screen has @media (pointer: coarse) CSS can be used to style elements accordingly: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... No need to get the server involved.

Thanks. Does the server really send the info to construct all possible page configurations for all possible devices? And if so, why are the websites still rendering with touch-interface objects when we doesn't have touch, as reported by OP? (The lack of touch screen ability seems like it should trump things like screen resolution.)

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

#325

Post by samatman »

capableweb wrote: post #298
ironmagma wrote: post #274

Earlier quoted context omitted.

Copying from elsewhere in this thread: `@media (pointer: coarse)`

Don't think that's quite right either. Pointer coarse would just refer to the device used for pointing. Using a tablet with a mouse would be "pointer: fine" but it's still a tablet. As always, the issue isn't black and white. There is no solution that always works, because it depends on what you're targeting. If you want to scale elements to be easier clickable for people who might devices where it's harder to click/…

> Using a tablet with a mouse would be "pointer: fine"

I would want to check this empirically before accepting it as gospel. At least on the iPad, a mouse pointer is kinda halfway between a finger and a classic mouse pointer, and having to guess, my guess is that Safari doesn't change the designation just because there's a mouse plugged in.

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

#326

Post by tshaddox »

kps wrote: post #303
teddyh wrote: post #162

Earlier quoted context omitted.

You mean 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀?

Now try a screen reader (on a mac, Edit > Speech > Start Speaking will do nicely). Spoiler: You mean mathematical sans-serif bold small l, mathematical sans-serif bold small i, mathematical sans-serif bold small k, mathematical sans-serif bold small e, mathematical sans-serif bold small t, mathematical sans-serif bold small h, mathematical sans-serif bold small i, mathematical sans-serif bold small s?

If screen readers do that, why? That seems useless even when those characters are used for their intended purpose.

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

#327

Post by tshaddox »

Robotbeat wrote: post #105
nobleach wrote: post #93

Earlier quoted context omitted.

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.

So you’re saying “professional == follows modern design fads” as a proxy for how legitimate a site is. And maybe you’re right that is a somewhat useful (if unreliable) proxy for legitimateness, but it’s not an argument that it’s good design.

If one of the goals of design is to serve as a signal for how trustworthy your business is, then it is absolutely an argument that it’s good design.

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

#328

Post by altfredd »

cptskippy wrote: post #152
falcolas wrote: post #140

Earlier quoted context omitted.

At least it allows for pinch zooming, which is (IMO, of course) an acceptable compromise. Maintain readability for the text while still making it possible to hit the UI elements.

Any site allows pinch zooming if you use Firefox and toggle a setting. That isn't an acceptable compromise, you end up doing a lot of horizontal scaling to read block quotes and zooming to touch UI elements. It's not the worst, but it is trivial to do better.

> you end up doing a lot of horizontal scaling to read block quotes

what block quotes?

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

#329

Post by hypertele-Xii »

ss64 wrote: post #273
freebreakfast wrote: post #164

Earlier quoted context omitted.

> 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.

What I use is @media (pointer: coarse) and (hover: none) { If you have a mouse plugged in, you get the desktop design.

I don't differentiate by type of device. I just detect aspect ratio:

@media (min-aspect-ratio: 1/1) /* wide */

@media (max-aspect-ratio: 1/1) /* tall */

@media (aspect-ratio: 1/1) /* square */

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

#330

Post by Nathanael_M »

madeofpalk wrote: post #146
Nathanael_M wrote: post #55

Earlier quoted context omitted.

I think primarily that's for constraining a div's aspect-ratio. Like making sure you have a div that's always 16:9 to hold a video player. I'd be interested in hearing other use cases, though.

No, it's not.

I'd be interested in hearing other use cases.
Post reply on HN