Mobile vs Desktop Browser Design Considerations in Perspective

Hello everyone.
I am writing a Perspective app that’s intended to be accessed via either a standard desktop browser, or a standard mobile browser. This Perspective app will have a lot of input fields (like checkboxes, textboxes, and dropdowns).

I am fully aware that Perspective is great at adapting it’s layouts to accommodate a variety of screen resolutions. This is helpful for displaying data… but for mobile touchscreens, the physical size of the input fields is critical. Let me explain…

Take the case of my desktop monitor (resolution 1920x1080, size 28 inches high) vs my phone screen (resolution 2412x1080, size 6 inches). Similar resolutions, but vastly different pixel densities / DPIs. On my mobile browser, the DPI is so high that in order for a finger to be able to easily click a dropdown box (for example), it would need to have a height of roughly 90 pixels (or about 1/4 inch onscreen). Since the desktop screen has roughly 20% of the pixel density (but similar resolution), that would make the same 90-pixel-high dropdown box hilariously large on screen for a desktop application (1.25 inches high).

Is there ANY way for Perspective to determine if a page is running on a standard desktop browser (or low DPI screen with mouse) vs a standard mobile browser (or high DPI touchscreen). Compensating for varying resolutions isn’t good enough here… for input elements, I essentially need to be able to compensate for varying DPIs. How can I do this?

Thanks in advance!

Frank.

User agents (browsers) already do a lot of legwork to abstract over the physical resolution from the so-called "logical" resolution. Have you actually experienced problems with a button set to X size? Ensure you're using CSS "logical" units, especially the automatically relative ones.

Doh! I guess I didn’t know that mobile browsers acted / ”reported back” like they had low-res screens (despite their high-res screen hardware). LOL!

Thanks so much! :sweat_smile:

Never trust the client... you can happily spoof this data for testing if you want to.