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

41–50 of 399 posts

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

#41

Post by madeofpalk »

TeMPOraL wrote: post #13

Wait, so sniffing on screen resolution is the way web developers distinguish desktops from mobile? That's just crazy . There should IMO be a preference sent, "I'm on a portable, touch-enabled device". I'm guessing it doesn't exist because it would add a bit to the fingerprint.

Screen resolution is, more or less the best approach.

Layouts need to fit a size, not a device, so that's why media queries based on the screen size are usually the best approach. If I resize my browser to make it smaller, I should get a layout to match that. If I'm using Safari on iPad, docked to the side of the screen, I should get a layout to match that. These are all about screen sizes, not "mobile vs desktop".

For testing interaction cabailities, there are the @media (pointer: coarse) and @media (hover: hover) media queries for testing touch vs mouse, and hover capabilities, but it's important to not rely on these for mobile vs desktop layouts otherwise tomorrow a MS Surface user will post "Just because I have a touch screen, doesn't mean I'm on a phone".

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

#42

Post by jkochis »

eznzt wrote: post #21
whalesalad wrote: post #7

I don’t think this has much to do with your vertical screen as much as it’s the narrow viewport.

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

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

#43

Post by ericol »

Wholeheartedly agree. And this apply not only to vertical.

I have a Samsung Tab A Tablet (Model SM-T510) that has better resolution than my notebook (A Lenovo T430). A page that displays very well in the Lenovo (1366x768) displays like crap in the tablet (1920x1200) even when using it in the landspace position.

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

#44

Post by Nathanael_M »

timw4mail wrote: post #15

The real problem is that designing for different screen sizes, especially with responsive design, is very difficult. For my personal projects, screen size is the factor used to determine layout. Mobile/tablet/laptop/desktop is irrelevant. My goal with smaller viewports is to make the layout as similar as possible, without the user having to scroll horizontally. Because I don't want to change the layout too much, I do…

I'm curious what your menu solution is. I agree hamburger menus besmirch the good name of the hamburger, but for longer menus they feel like at least an acceptable solution.

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

#45

Post by madeofpalk »

masklinn wrote: post #39
jefftk wrote: post #30

Earlier quoted context omitted.

In this case, "portable, touch enabled device" wouldn't match what we're talking about. Someone with a large tablet should receive the version optimized for larger screens. The website is saying "if your screen is at least this big, I'm going to show you the version for big screens". The OP has an unusual setup where their big screen is reporting as a smaller screen.

> Someone with a large tablet should receive the version optimized for larger screens. Not necessarily, because the “smaller screen” layout tends to be linked to the touch one e.g. larger active targets, while the “large screen” layout is optimised for precise pointing devices (mice) and may be nigh impossible to interact with using fingers.

Well, if you want to change for interactions, we have @media (pointer: coarse) and @media (pointer: fine) for that.

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

#46

Post by thesuitonym »

jefftk wrote: post #36
avipars wrote: post #25

why not use the user-agent?

The UA doesn't tell you anything about the screen the person is viewing on or the size of their window. If I resize a window on my desktop to 450x1000, showing me the layout for narrow screens is likely the best option.

Perhaps the answer is not to change elements on the website, but to design the site in such a way that it looks good at any resolution.

We used to do this before responsive design took over.

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

#47

Post by madeofpalk »

avipars wrote: post #25

why not use the user-agent?

Because a single user agent and present websites at multiple sizes.

Consider an iPad which can display a website at three vastly different sizes. Full-width, half-width, and roughly 1/5th width docked to the site. They should have at least two different layouts.

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

#48

Post by jefftk »

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. Those sites are acting correctly.

The author's proposed solution is for sites to use DPI instead, but this would thwart the preferences of users who use scaling because they want the whole site to look bigger.

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

#50

Post by donatj »

TeMPOraL wrote: post #13

Wait, so sniffing on screen resolution is the way web developers distinguish desktops from mobile? That's just crazy . There should IMO be a preference sent, "I'm on a portable, touch-enabled device". I'm guessing it doesn't exist because it would add a bit to the fingerprint.

The general idea with well built responsive design is to build a site that works at any width, reflowing as things would break. You can try it by just resizing the window of most popular sites to be progressively smaller.

It’s honestly been a significant improvement over dedicated mobile layouts and for the most part works pretty well.

Post reply on HN