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/css/05-responsive/_breakpoints.css
+21 -19
View File
@@ -670,27 +670,29 @@
Mobile: iOS-Style Button Bar with Blur
======================================== */
/* iOS-style blur bar - Only show on devices that support backdrop-filter (primarily iOS) */
@media (max-width: 540px) {
/* iOS-style blur bar behind fixed buttons */
.fixed-buttons-backdrop {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 90px; /* Enough to cover button area */
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 0.5px solid rgba(0, 0, 0, 0.1);
z-index: 98; /* Below buttons (99) but above content */
pointer-events: none; /* Don't block button clicks */
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.fixed-buttons-backdrop {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 90px; /* Enough to cover button area */
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 0.5px solid rgba(0, 0, 0, 0.1);
z-index: 98; /* Below buttons (99) but above content */
pointer-events: none; /* Don't block button clicks */
}
/* Dark mode blur bar */
[data-color-theme="dark"] .fixed-buttons-backdrop,
[data-color-theme="auto"] .fixed-buttons-backdrop {
background: rgba(30, 30, 30, 0.8);
border-top: 0.5px solid rgba(255, 255, 255, 0.1);
/* Dark mode blur bar */
[data-color-theme="dark"] .fixed-buttons-backdrop,
[data-color-theme="auto"] .fixed-buttons-backdrop {
background: rgba(30, 30, 30, 0.8);
border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}
}
}