From 305143b43341f24fbad331d236fd27bf3f197148 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 17 Oct 2025 05:13:00 -0600
Subject: [PATCH] Fix: Usar pointer device para detectar desktop en lugar de
 ancho
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar detección de desktop de min-width a (pointer: fine)
- Esto detecta si tiene mouse/trackpad (desktop) vs touch (móvil)
- Más confiable para PWAs que se abren con ancho fijo
- Mantener ancho como fallback para compatibilidad
---
 nuxt4/app/composables/useDeviceType.ts       | 42 ++++++++++++++------
 nuxt4/app/plugins/pwa-link-handler.client.ts |  6 ++-
 2 files changed, 33 insertions(+), 15 deletions(-)

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