¿Cómo usar diferentes CSS y rutas en nodeJS para móviles?

Estamos desarrollando una aplicación web en nodeJS para la cual, al acceder con un dispositivo móvil, necesitamos mostrar diferentes vistas en nuestro enrutamiento utilizando diferentes CSS. ¿Cómo se puede detectar e implementar esto?

Esta es una pregunta muy grande, compleja, y no es realmente específica de “nodejs”, pero trataré de disparar una respuesta.

Las mejores prácticas actuales son usar detección de características y diseño sensible para producir la interfaz móvil.

Con CSS3, es posible usar Consultas de medios para determinar cómo se deben mostrar los elementos HTML en la pantalla, en función de varias propiedades del dispositivo en uso (resolución, densidad de píxeles, orientación, “dispositivo de mano”, etc.)

Puede ir más allá y usar la detección de características para determinar qué características cargar. Verificar si se puede definir “uponuchstart” en un elemento, sería una buena manera de saber si los eventos táctiles fueron (o no) soportados. Las bibliotecas como Yepnope fueron diseñadas para hacer esto fácil.

En muchos casos, esto será adecuado, y como dije, estas son las mejores prácticas actuales.

Sin embargo, en algunos casos, es posible que desee producir una estructura HTML diferente. Dependiendo de si está utilizando plantillas del lado del cliente (como sucede con frecuencia en las aplicaciones “SPA”) o de la representación en el servidor, creo que tiene al menos tres opciones diferentes, ambas esencialmente dependen de la información anterior:

Opción A: use la detección de características para determinar si está “en el móvil” (lo que sea que eso signifique para usted), luego solicite las plantillas “móviles” al servidor a través de una URL especial que incluya una marca “isMobile”, como “/ clientTemplates ? isMobile = true “.

Opción B: use la detección de características para determinar si está “en el móvil”. Luego puede configurar una cookie o un encabezado de tipo “X-Client-Type” que indica si está “en el móvil”, luego, en su middleware express, puede usar una convención como la siguiente:

app.use('/apath', function(req, res){ //get the type of client var view_type = req.headers['X-Client-Type'] || 'desktop'; var model = {}; //by convention, "apath_mobile" or "apath_desktop" //will be rendered based on this header. res.render('apath_' + view_type, model); } 

Opción C: utilice el encabezado “Usuario-Agente” ( no confiable ) para determinar si el cliente que realiza la solicitud es “móvil”. De nuevo, esta no suele ser una buena forma de realizar este tipo de verificación. Una vez que haya determinado “escritorio” o “móvil”, puede usar el mismo tipo de técnica que se describe en la Opción B.

Una vez más, le recomiendo que consulte la detección de características y el diseño sensible, ya que son soluciones mucho más elegantes para este problema y son la solución a largo plazo para esto.