Refactor mobile button detection logic #1862
Conversation
| // Show mobile buttons if device has narrow screen OR (touch AND coarse pointer) | ||
| return isNarrowScreen() || (hasTouchSupport && primaryPointerIsCoarse); | ||
| } | ||
|
|
There was a problem hiding this comment.
I think your logic is on-point :)
The main question coming to mind is how accurate is pointer: coarse? Like if a laptop with touch capabilities (like tablet/laptop 2-in-1 combos) is correctly detected as pointer: fine when using a mouse or not.
I can test on a laptop with a touch display later today if that helps a bit. edit: I tested and the touchscreen was correctly detected as secondary pointing device.
| function needsMobileButtons(): boolean { | ||
| // Check for touch support | ||
| const hasTouchSupport = Boolean('ontouchstart' in window || | ||
| (navigator.maxTouchPoints && navigator.maxTouchPoints > 0)); |
There was a problem hiding this comment.
Wouldn't exclusively relying on the presence of ontouchstart be better than also having those maxTouchPoints tests?
Since hasTouchSupport is later combined with a rather recent pointer media query test, and we only support recent browsers in Grist anyway.
edit: after sleeping on it I guess I'm wrong on that and checking both pointer events and touch events is great anyway. As you wish!
|
Deployed commit |
Currently Grist detects mobile browser by looking at the
UserAgentbrowser settings, but some browsershide that for security reasons.
Proposed solution
Instead of detecting the mobile platform, Grist will now check what is the primary input device or if
the screen is small enough to assume it is a mobile device.
Has this been tested?
Only manual tests on mobile browsers