txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: iOS-specific blur bar and hide keyboard shortcuts on real mobile devices

Browse Source 
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
This commit is contained in:
juanatsap
2025-11-24 20:48:12 +00:00
parent 8bf48a1dd7
commit da81a0b148
5 changed files with 129 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/device-detection.js
+20
View File
@@ -0,0 +1,20 @@
/**
* 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');
}
})();