juanatsap
da483ae9f1
Issues fixed: 1. Zoom button now uses purple color (rgba(155, 89, 182, 0.7)) instead of blue 2. Info button keeps blue color (rgba(52, 152, 219, 0.7)) 3. Both buttons now show distinct colors in default state, not just on hover 4. Device detection now considers viewport width, not just user agent 5. Buttons no longer hide in responsive mode at desktop viewport sizes Changes: - Updated zoom-toggle-btn to use purple background color - Updated info-button to use blue background color (explicit, not var) - Modified device-detection.js to check viewport width (≤900px) in addition to UA - Added resize listener to update device class dynamically - Created test (67-button-colors-and-visibility-test.mjs) to verify fixes Testing: - Desktop (1278px): All buttons visible with distinct colors - Mobile (375px): Zoom/shortcuts hidden, core buttons visible - Device detection now viewport-aware (prevents hiding at desktop sizes)
39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
/**
|
|
* DEVICE DETECTION
|
|
* Detects real mobile devices vs desktop browser in mobile view
|
|
* Adds 'is-mobile-device' class to body for styling differences
|
|
* Now also considers viewport width to avoid hiding buttons in responsive mode at desktop sizes
|
|
*/
|
|
|
|
(function() {
|
|
function updateDeviceClass() {
|
|
// 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;
|
|
|
|
// Check viewport width - only consider it a mobile device if viewport is also mobile-sized
|
|
const isMobileViewport = window.innerWidth <= 900;
|
|
|
|
// Consider it a real mobile device if ALL three conditions are met:
|
|
// 1. Mobile user agent
|
|
// 2. Touch support
|
|
// 3. Mobile viewport width (≤900px)
|
|
// This prevents hiding buttons in responsive mode at desktop sizes
|
|
if (isMobileDevice && hasTouch && isMobileViewport) {
|
|
document.documentElement.classList.remove('is-desktop');
|
|
document.documentElement.classList.add('is-mobile-device');
|
|
} else {
|
|
document.documentElement.classList.remove('is-mobile-device');
|
|
document.documentElement.classList.add('is-desktop');
|
|
}
|
|
}
|
|
|
|
// Run on load
|
|
updateDeviceClass();
|
|
|
|
// Re-check on resize (for responsive mode testing)
|
|
window.addEventListener('resize', updateDeviceClass);
|
|
})();
|