31–40 of 399 posts
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…
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.
This is the suggested way because if you check the device width you know that they are on a small device and thus probably mobile but your styling changes for small windows (less wide windows) do not get applied, so 'best practice' is to check the actual screen width. Hardly anyone checks the height because for web development height is generally not that important.
But this is often not useful because a lot of web solutions style things based on JavaScript and CSS and while the CSS will rerender automatically based on changing the screen size the JavaScript needs to detect you've changed the screen size and then rerender. So then there is a discussion as to how many people really resize the windows and do we need to catch this resize to do a rerender even though doing so is irritating and can be a resource hog (fixable by extra code but maybe better not to code at all!)
But there are lots of other ways to detect if you are on a mobile device, you can detect if touch screen events are enabled etc. but then what if you have one of those weird desktops that became possible a few years ago (I nearly wrote popular instead of possible) where your laptop's monitor also has touch screen events.
As a general rule it is best to do things based on the capacity of the system, and not by what type of system it is, but as the capabilities of our systems exist in infinite combinations it follows some things will just fall through no matter how exacting you try to be - maybe especially if you try to be too exacting.
"falsehoods developers believe about screens" ?
No. Just simple heuristics that work for most users at the expense of people who admit, like OP's opening statement, "I’m a weirdo". Building responsive client UI is hard. In my experience here, the falsehoods HNers believe about clients is that it's somehow not hard. Or just a silver bullet away from being easy (like replacing JS with $faveLang). Or that resources are infinite such that every defect is explained by…
For something so universal ... there should be a very clear and unambiguous function call and at least a rational way to move through the fragmentation molasses.
Author's proposed solution: var dppx = window.devicePixelRatio; var screenWidth = screen.width * dppx; var screenHeight = screen.height * dppx;
why not use the user-agent?
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.
There’s really no other information since “physical” dimensions are completely fake: a CSS inch is 96 CSS pixels which are “one pixel at 96 dpi at an arm’s length”.
why not use the user-agent?
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.
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.
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.