Hacker News Reader

Comment by whalesalad | Hacker News Reader

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?

Exactly. CSS does not check that your screen is taller than it is wide. What it sees is a narrow viewport.

Is that what this is for? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspe...

You can query for aspect ratio in CSS, yes. This can be useful for figuring out whether it's better to place something as, say, a sidebar vs a footer. The sites they are complaining about, however, are only looking at the horizontal dimension.

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.

The aspect ratio media query just lets you apply certain CSS to the page depending on the viewport aspect ration. It does not set an aspect ratio on an element.

Maybe there’s something I’m missing, but I’m not sure how knowing the aspect ratio of the screen would help make an element 16:9. If my browser is narrower or wider, that doesn’t affect how I would style the element.

Oh, sorry, I was reading an article about the new CSS aspect-ratio property and mixed it up with the CSS aspect-ratio media query.

The CSS could very well be checking that

// The viewport is in a landscape orientation, i.e., the width is greater than the height.

@media (orientation: landscape)

// The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

@media (orientation: portrait)

Reply on news.ycombinator.com