341–350 of 399 posts
Earlier quoted context omitted.
No, it's not.
I'd be interested in hearing other use cases.
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.
Earlier quoted context omitted.
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…
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.
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.
Earlier quoted context omitted.
Yes, they define a bunch of @media filters in css for different known screen widths. You usually get a surprising look when pointing out that it is crazy. “How else would you know that?” Something as simple as “use-case: handheld | bellyheld | desktop” property? Css designers missed this opportunity completely.
“use-case: handheld | bellyheld | desktop” would give zero useful information. How would you detect a desktop with a small window?
I feel like I must be missing something, because I don't understand this author's point at all. "Lots of websites think “Vertical Screen == Mobile User”!" No, they don't - They think a 720px wide screen is a tablet user, which is probably a fair assumption. I could equally write "Just because I browse zoomed in 500% doesn't mean I'm on a mobile" When you zoom in, things get bigger, so fewer of them will fit on the sc…
They don't even think that. I have one 1920x1080 monitor and one 1440p monitor. On both monitors, I regularly make it so that each screen is used by 2 applications. A lot of websites think 960x980 is mobile. *half* of a 1080p screen. It's bad and a huge assumption on their part that their website should only be seen in full-screen mode, or half of some 4k screen when the most popular resolution is ignored in a produc…
Ideally, would every website deliver aggressively optimized experiences across all viewport widths - sure. But at the end of the day someone is paying the bills.
As a product manager, my immediate response is... not worth the time. You've chosen to have a unique setup, which is fine, but your use case represents some absolutely miniscule fraction of users. On top of that, it's not even that websites are unusable, just that they're not ideal. When you decide to do weird/special/unique stuff, don't expect the world to adapt to you. You can rotate your monitor back or live with…
People with disabilities or visual impairments often have unusual setups that enable them to read. They didn't CHOOSE to be disabled.
All of that aside, I think you're being disingenuous in trying to strongarm this as some sort of rebuttal to parents comment.
Earlier quoted context omitted.
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.)
Earlier quoted context omitted.
Agreed completely. One mistake that designers/developers do though is to completely give up under 1000px so we get this swaths of whitespace and a hamburger. That’s a waste of estate and a waste of my time.
I've found sites using Material UI guidelines (heavy use of cards and navbar hamburger) especially culpable to this. Huge gap of greyish whitespace with a hamburger in the left. Someone else mentioned bootstrap in the other thread too. Maybe because these Frameworks are hugely popular, their defaults amplify the impact. Definitely these values are tweakable.
“The small breakpoint is 768px wide? I guess below it it’s a phone, I hope you like burgers”
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/…
And aside from that, shouldn't a tablet where a mouse is being used as the primary input show buttons sized appropriately for a mouse, rather than larger ones? The whole idea of making buttons bigger on mobile is to accommodate thumbs, so it seems like this media query is exactly what we should be using.
The real problem here is actually that developers make sure their site looks reasonable at the phone and desktop breakpoints, but it's rare that someone specifically designs for the "tablet" breakpoint.
Quick examples:
- https://pkg.go.dev/net/http this website is terrible to use at the tablet breakpoint, the main content is literally pushed below the fold for me
- https://neutrinojs.org/installation/ they threw away the right-hand and left-hand navigation so that they could make a page that is much too wide to read comfortably
- https://developer.mozilla.org/en-US/docs/Web/API/Window/aler... they throw away the left-hand navigation and replace it with whitespace on the right-hand side
These examples aren't particularly "rude offenders", this is just par for the course.