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.
Just because I have a vertical screen doesn’t mean I’m on a phone
21–30 of 399 posts
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#22"falsehoods developers believe about screens" ?
A collection of deep-deep dives on various topics would be a fun thing for someone who can build a nice website to do (You don't want to see my attempts at being a designer). For example, "What every programmer should know about memory" covers memory but what about (as you say) screens.
You might enjoy https://github.com/kdeldycke/awesome-falsehood
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#23The first DPI detector site detects my 55" 4K monitor as 442 DPI (5120x2880 at 13.3") when entering my resolution and diagonal size in inches gives me 80 DPI. The other one detects it as 192x192 DPI which is a much larger number. Maybe the first number means it should be 80x80 DPI but either way 192x192 is much larger. Maybe I'm missing something.
https://dpi.lv/ is not detecting your screen size. It shows 13.3 as a default. Type in your real size and it will calculate your actual DPI.
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#24Mobile browsers usually have a "request desktop version" checkbox. How does that work then?
The mobile browser uses different viewport information (and likely sends a desktop UA string).
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#25why not use the user-agent?
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#26Mobile browsers usually have a "request desktop version" checkbox. How does that work then?
In my experience, they change the detected width of the viewport. Some also change the User Agent header.
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#27Mobile browsers usually have a "request desktop version" checkbox. How does that work then?
[deleted]
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#28I feel like this is a more complex problem to solve than it seems at face value or the author implies, especially considering tablets of varying dpi. CSS dpi media queries are unsupported in Safari mobile and desktop, so that increases the complexity significantly. Beyond that, the fact is most web layout is still done in px or other non-fraction-of-the-width units, so it’s often a matter of the wider layout simply b…
Yeah, I was trying to find a way to create a toolbar with buttons and make sure the buttons are not too small or not too big. DPI info is not present and different tricks to work around this will fail on different phone models.
I wish I could ask the browser "what are the dimensions you the browser use for your buttons" so I can use same dimensions too and the user could configure this in his browsers and everything would follow it.
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#29Mobile has some unique characteristics that don't fully allow agnostic design, namely:
- viewport changes size due to soft keyboard - address bar hides/unhides during scroll down/up
For certain types of apps, like games, it's important to know whether a device is actually "mobile" regardless of size/resolution. Sniffing user-agents might have to come back into vogue. Who knows where "mobile browsers" will end up - maybe some giant 60" kiosk app, or other places.
Barring that though the article brings up good points and searching the web for how to detect mobile usually brings up the error-prone portrait/landscape resolution detection that the article discusses.
The full solution requires the knowing the resolution and the dpi to get an estimate size of screen in inches. At least with that we can be safe until next article "Just because I'm a 100" kiosk app, doesn't mean I'm on a phone".
Is there a good npm lib that does the above?
Re: Just because I have a vertical screen doesn’t mean I’m on a phone
#30Wait, 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.