diff --git a/nuxt4/app/composables/useDeviceType.ts b/nuxt4/app/composables/useDeviceType.ts index 8f948ce..9482c1d 100644 --- a/nuxt4/app/composables/useDeviceType.ts +++ b/nuxt4/app/composables/useDeviceType.ts @@ -1,38 +1,54 @@ /** * Composable para detectar el tipo de dispositivo (desktop o móvil) - * Usa matchMedia para detectar el tamaño de pantalla + * Usa pointer device para detectar si tiene mouse (desktop) o touch (móvil) + * Esto es más confiable que el ancho de ventana para PWAs */ export const useDeviceType = () => { const isDesktop = ref(false) if (import.meta.client && typeof window !== 'undefined') { - // Detectar si el dispositivo es desktop basado en el ancho de pantalla - // Usamos 1024px como punto de corte (típico para tablets/desktops) - const mediaQuery = window.matchMedia('(min-width: 1024px)') + // Detectar si el dispositivo principal es un puntero fino (mouse/trackpad) + // vs un puntero grueso (touch). Esto es más confiable para PWAs. + const pointerQuery = window.matchMedia('(pointer: fine)') - // Establecer valor inicial - isDesktop.value = mediaQuery.matches + // También verificar si el ancho de pantalla es >= 1024px como fallback + const widthQuery = window.matchMedia('(min-width: 1024px)') + + // Considerar desktop si tiene pointer fino O ancho >= 1024px + isDesktop.value = pointerQuery.matches || widthQuery.matches console.log('[useDeviceType] Initialized:', { isDesktop: isDesktop.value, + pointerFine: pointerQuery.matches, windowWidth: window.innerWidth, - mediaQueryMatches: mediaQuery.matches + screenWidth: window.screen.availWidth, + widthMatches: widthQuery.matches }) - // Escuchar cambios en el tamaño de pantalla - const handleChange = (e: MediaQueryListEvent) => { - isDesktop.value = e.matches - console.log('[useDeviceType] Changed:', { + // Escuchar cambios en el pointer (aunque es raro que cambie) + const handlePointerChange = (e: MediaQueryListEvent) => { + isDesktop.value = e.matches || widthQuery.matches + console.log('[useDeviceType] Pointer changed:', { + isDesktop: isDesktop.value, + pointerFine: e.matches + }) + } + + const handleWidthChange = (e: MediaQueryListEvent) => { + isDesktop.value = pointerQuery.matches || e.matches + console.log('[useDeviceType] Width changed:', { isDesktop: isDesktop.value, windowWidth: window.innerWidth }) } - mediaQuery.addEventListener('change', handleChange) + pointerQuery.addEventListener('change', handlePointerChange) + widthQuery.addEventListener('change', handleWidthChange) // Cleanup al desmontar onUnmounted(() => { - mediaQuery.removeEventListener('change', handleChange) + pointerQuery.removeEventListener('change', handlePointerChange) + widthQuery.removeEventListener('change', handleWidthChange) }) } diff --git a/nuxt4/app/plugins/pwa-link-handler.client.ts b/nuxt4/app/plugins/pwa-link-handler.client.ts index 28e4fb1..bb132a5 100644 --- a/nuxt4/app/plugins/pwa-link-handler.client.ts +++ b/nuxt4/app/plugins/pwa-link-handler.client.ts @@ -11,8 +11,10 @@ export default defineNuxtPlugin(() => { window.matchMedia('(display-mode: window-controls-overlay)').matches || (window.navigator as any).standalone === true - // Detectar si estamos en desktop - const isDesktop = window.matchMedia('(min-width: 1024px)').matches + // Detectar si estamos en desktop usando pointer device (más confiable para PWAs) + const pointerQuery = window.matchMedia('(pointer: fine)') + const widthQuery = window.matchMedia('(min-width: 1024px)') + const isDesktop = pointerQuery.matches || widthQuery.matches if (isPWA) { // Obtener el origin de la aplicación