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

The ideal viewport doesn't exist

viewports.fyi

Post reply on HN
Print view View original

21–30 of 202 posts

Re: The ideal viewport doesn't exist

#21

Post by csydas »

Jabrov wrote: post #12

Literally can't read through this on Chrome iPhone 13 because it keeps jumping back to the top :(

I was seeing something similar with desktop Safari (15.6.1) on MacOS. Resizing the browser window, and looks like (but not sure) that it just switches to another breakpoint (their words) for a new viewport, and they didn't design a way to pass the page scroll position to the new view port so it just resets the page position.

Their "all viewports" page also isn't visible on my browser if the window is too small as the titles on each viewport aren't visible.

Re: The ideal viewport doesn't exist

#22

Post by carlosjobim »

PMunch wrote: post #5

I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my p…

It doesn't work like that. Web browsers do not count actual pixels when rendering. They adjust high density pixels to the equivalent real life size of low density pixels.

Re: The ideal viewport doesn't exist

#23

Post by shortrounddev2 »

RugnirViking wrote: post #3

Nice web design but this jumped out at me: (they have 120000 viewpoints): "Wembley stadium has a capacity of 90,000, so our datapoints could fill Wembley once and still fill another third of the available capacity." the way this is written adds to confusion rather than enlightens. "another third of the available capacity" makes it sound like there is space left over in wembley i.e. you haven't fully filled it. I thin…

Also, working in an industry with a lot of data, 120k isn't a lot

Re: The ideal viewport doesn't exist

#25

Post by afavour »

carlosjobim wrote: post #22
PMunch wrote: post #5

I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my p…

It doesn't work like that. Web browsers do not count actual pixels when rendering. They adjust high density pixels to the equivalent real life size of low density pixels.

The OP is talking about things like media queries that only look at screen width and imply other things like input method from that.

IIRC SquareSpace does exactly what they're saying: on desktop sites will have a horizontal list of links but on mobile it's a hamburger icon that takes over the entire viewport when clicked. Functionality exists to target pointer type and things like that in media queries, it's just very rarely used.

Re: The ideal viewport doesn't exist

#26

Post by throwaway290 »

Technotroll wrote: post #20
PMunch wrote: post #5

I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my p…

This is an interesting observation. Do you have some examples of this?

react.dev

And for an example that does it better, legacy.reactjs.org :)

When I saw it I wondered how they managed to drop the ball so hard and how much they paid for it. All they needed is to expand and slightly restructure the docs, but apparently someone sold them a complete redesign that just made the whole docs way less usable (a11y aside, can't speak for that).

Re: The ideal viewport doesn't exist

#27

Post by johnnyworker »

5350-uiop-1130 wrote: post #15

> "The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports." I don't know how useful this is. setting breakpoints allows some sanity in the build and testing process otherwise you have an infinite scope for issues…

For me it really just involves squishing the browser window in all sorts of ways and see what happens, and if I get any ideas on what I would want to change. I don't see what the big deal is.

> crap (stuff that can go wrong) like animations, weird font sizes and font faces, javascript

None of these per se are the issue, and you can still have the issue with zero animations, fonts or JavaScript.

Re: The ideal viewport doesn't exist

#28

Post by bee_rider »

ghusto wrote: post #2

> It’s safest to presume that users on desktop or laptop devices are not filling their entire screen with a browser. Not on literally any laptop I've ever seen. I've never seen a screen where the browser _isn't_ filling all space available to them, sometimes even the entire screen (in fullscreen mode on MacOS).

It just seems like confusing wording. I think you are right that most people use their programs full-screen on laptops (As an aside, it is funny that thin-and-light-ism has managed to progress to the point where the average person finally gets the 2008 experience).

But I think what they meant is: it is safest not to presume that desktop or laptop users are filling their entire screen with a browser.

The way they wrote it suggest that the assumption of the negative is safest, while the way I wrote it says it is safest not to make the assumption. This has a general smell of the inverse fallacy, although it isn’t like they are trying to make some bulletproof logical deduction anyway.

Re: The ideal viewport doesn't exist

#29

Post by afavour »

shortrounddev2 wrote: post #23
RugnirViking wrote: post #3

Nice web design but this jumped out at me: (they have 120000 viewpoints): "Wembley stadium has a capacity of 90,000, so our datapoints could fill Wembley once and still fill another third of the available capacity." the way this is written adds to confusion rather than enlightens. "another third of the available capacity" makes it sound like there is space left over in wembley i.e. you haven't fully filled it. I thin…

Also, working in an industry with a lot of data, 120k isn't a lot

Come on, that's a silly statement. There's no point comparing completely context free "amounts of data".

If the post was “the incredible difficulty of inserting 120k rows in database” you’d have a point. But it isn’t.

Re: The ideal viewport doesn't exist

#30

Post by johnnyworker »

afavour wrote: post #25
carlosjobim wrote: post #22

Earlier quoted context omitted.

It doesn't work like that. Web browsers do not count actual pixels when rendering. They adjust high density pixels to the equivalent real life size of low density pixels.

The OP is talking about things like media queries that only look at screen width and imply other things like input method from that. IIRC SquareSpace does exactly what they're saying: on desktop sites will have a horizontal list of links but on mobile it's a hamburger icon that takes over the entire viewport when clicked. Functionality exists to target pointer type and things like that in media queries, it's just ver…

Ohhh, I had no idea! Thank you.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin...

    coarse - The primary input mechanism includes a pointing device of limited accuracy
    such as a finger on a touchscreen.

    fine - The primary input mechanism includes an accurate pointing device, such as a mouse.
This solves everything! What I really want is having more padding on mobile, that's it. I prefer things to be compact otherwise, and it seemed hard to square that circle... with the pointer media query it's so trivial.

Gotta love how every time you don't watch CSS like a hawk, it spawns 500 new features. Thanks again.

Post reply on HN