cv-site/static/js/device-detection.js

/**
 * 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);
})();