juanatsap
da81a0b148
Issue 1: Blur bar compatibility (Android doesn't always show at bottom) ✅ Solution: Wrap blur bar in @supports query for backdrop-filter - Only shows on devices that support backdrop-filter (primarily iOS) - Android devices without support won't see the bar - Prevents layout issues on non-iOS devices Issue 2: Keyboard shortcuts button on real mobile (no physical keyboard) ✅ Solution: Device detection + conditional hiding - Added device-detection.js: Detects real mobile vs desktop browser - Checks user agent (Android, iPhone, iPad, etc.) + touch support - Adds 'is-mobile-device' or 'is-desktop' class to <html> - CSS hides shortcuts button only on real mobile devices - Desktop browser in mobile view: shortcuts button still visible (for testing) Implementation Details: 1. Device Detection (static/js/device-detection.js): - User agent detection: /Android|iPhone|iPad|etc./ - Touch support check: ontouchstart + maxTouchPoints - Class added to <html>: is-mobile-device or is-desktop 2. Blur Bar (@supports query): - Detects backdrop-filter support before applying - iOS: Shows blur bar with backdrop-filter - Android (most): No blur bar (no backdrop-filter support) - Prevents empty/broken bar on incompatible devices 3. CSS Hiding Rules: - .is-mobile-device .shortcuts-btn { display: none !important; } - Also hides zoom-toggle-btn and zoom-control on real mobile - Desktop mobile view: shortcuts button remains visible Files Modified: - static/js/device-detection.js: NEW - Device detection logic - templates/index.html: Load device-detection.js early - static/css/05-responsive/_breakpoints.css: @supports wrapper for blur bar - static/css/04-interactive/_scroll-behavior.css: Hide shortcuts on real mobile - tests/mjs/52-mobile-device-detection-test.mjs: Comprehensive device detection test Test Results: ✅ iPhone (real mobile): is-mobile-device class, shortcuts hidden ✅ Desktop browser (mobile view): is-desktop class, shortcuts visible ✅ Blur bar: Only shows on devices with backdrop-filter support
21 lines
750 B
JavaScript
21 lines
750 B
JavaScript
/**
|
|
* DEVICE DETECTION
|
|
* Detects real mobile devices vs desktop browser in mobile view
|
|
* Adds 'is-mobile-device' class to body for styling differences
|
|
*/
|
|
|
|
(function() {
|
|
// Check if user agent indicates a real mobile device
|
|
const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
|
|
// Also check for touch support (additional indicator)
|
|
const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
|
|
// Consider it a real mobile device if both conditions are met
|
|
if (isMobileDevice && hasTouch) {
|
|
document.documentElement.classList.add('is-mobile-device');
|
|
} else {
|
|
document.documentElement.classList.add('is-desktop');
|
|
}
|
|
})();
|