lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-21 20:55:55 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(UI): Differentiate tablet UI based on pointer capabilities (#1482)

Browse Source 
* feat: Differentiate tablets by pointer type

Reclassifies tablets with a mouse/trackpad to use the desktop UI.

This is detected by checking for `(hover: hover)` media query capabilities. This ensures that touch-only tablets retain their original, touch-friendly mobile UI while fixing the bug for users with pointer devices.

* Make sure `matchMedia` exists before using it

---------

Co-authored-by: Nariman Jelveh <nj@puter.com>
This commit is contained in:
Tarun saini
2025-09-09 18:58:04 -07:00
committed by GitHub
co-authored by Nariman Jelveh
parent c59dbcfaa2
commit fb04c55216
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/initgui.js
+13 -4
View File
@@ -374,12 +374,21 @@ window.initgui = async function(options){
// Checks the type of device the user is on (phone, tablet, or desktop).
// Depending on the device type, it sets a class attribute on the body tag
// to style or script the page differently for each device type.
if(isMobile.phone)
if (isMobile.phone) {
$('body').attr('class', 'device-phone');
else if(isMobile.tablet)
$('body').attr('class', 'device-tablet');
else
} else if (isMobile.tablet) {
// This is our new, smarter check for tablets
if (window.matchMedia && typeof window.matchMedia === 'function' && window.matchMedia('(hover: hover)').matches) {
// The user has a mouse/trackpad, so give them the desktop UI
$('body').attr('class', 'device-desktop');
} else {
// The user is on a touch-only tablet, so give them the mobile UI
$('body').attr('class', 'device-tablet');
}
} else {
$('body').attr('class', 'device-desktop');
}
// Appends a meta tag to the head of the document specifying the character encoding to be UTF-8.
// This ensures that special characters and symbols display correctly across various platforms and browsers.