¿Sugerencias para una sola página de JQuery que sea compatible con computadoras de escritorio y dispositivos móviles?

Question

Actualmente tengo un sitio que aloja una página que quiero que sirva tanto para navegadores de escritorio como de dispositivos móviles. El diseño e implementación del escritorio ya está completo y usa JQuery.

Me encantaría tener esta página para usar un diseño diferente cuando un usuario visita en un navegador móvil que es compatible con JQuery Mobile.

Estoy tratando de encontrar la mejor manera de hacerlo pero no puedo encontrar información sobre las mejores prácticas para esto. Toda la documentación/guías existentes que puedo encontrar sobre esto asumen que la página de jQuery que está escribiendo es exclusivamente compatible con los navegadores móviles, por lo que no se ocupa del formateo para el escritorio.

opciones que parecen obvias:

1. La misma página, pero marcado acaba adicional en la parte superior del contenido existente para volver a formatear para móviles
2. La misma página, pero con marcado addtional que duplicados el contenido existente, pero se formatea para dispositivos móviles Si el navegador de escritorio, el contenido no móvil está oculto/no renderizado.
3. Algunos detección dinámica de la telefonía móvil frente a no-móvil, entonces ruta entre 2 páginas diferentes (de escritorio) vs. móvil

Creo # 2 es probablemente el más fácil, pero no me gusta la idea de duplicado contenido en la página. # 1 parece poco realista pensar que puedo simplemente aumentar mi contenido existente con un montón de marcas para tener mágicamente formato para dispositivos móviles (mientras sigo dando soporte al escritorio).

Agradecería cualquier consejo y consejos sobre las guías que puedan existir y sobre las mejores prácticas.

Aclaración: Suponga que no estoy usando Rails, ASP.NET MVC, etc.

Answer 1

CSS Consultas de medios son excelentes para esto. (tenga cuidado, son CSS3) según el tamaño del agente de visualización (¡y se actualiza dinámicamente!) cierto contenido puede ocultarse o mostrarse, convirtiéndolo básicamente en un cambio de sus opciones # 1 y # 2. Tendría un gran diseño con todas las funciones para el escritorio, con su estilo y jQuery, y cuando la pantalla es pequeña (lo que significa que es un teléfono o un nerd cambiando el tamaño de su navegador) esconde algunas de las cosas más detalladas y cambia algunas cosas y tal vez mostrar algunas otras cosas. Lea acerca de Media Queries aquí: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html EDITAR: Para aclarar, puede personalizar completamente elementos con consultas de medios, por lo que, en tamaño de escritorio, un div puede tener un borde punteado, esquinas redondeadas, relleno de 10 px, etc., mientras que en phone the div tiene 1px relleno, borde sólido, etc.

Answer 2

Estoy seguro de que has superado este problema, ya que esta pregunta tiene un par de meses, pero pensé que ofrecería lo que soy trabajando para el mismo tipo de problema.

Problema: Quiero un sitio que sea aceptable en dispositivos móviles, tabletas y pantallas de escritorio grandes y pequeñas.

Solución:

• consultas CSS medios de comunicación son la opción obvia para que la escala de la página y "responder" a la vista del usuario. Hay un gran impulso en este momento y algunas charlas interesantes sobre diseño receptivo, imágenes receptivas, etc. Estoy diseñando para móvil primero (otro empujón) y utilizando consultas de medios para cambiar el diseño/contenido visible a medida que la pantalla se agranda.

• El gran problema se produce con JavaScript. Si utilizo un marco JS móvil, eso también se incluirá en mi versión de escritorio, no es ideal. Si utilizo jQuery en ambos, obtendré mucho ancho de banda extra en mi versión móvil que preferiría no tener. Decidí usar Modernizr para permitirme cargar scripts basados ​​en el tamaño de la pantalla con la nueva prueba de consultas de medios de Modernizr. Esto me ha permitido mantener una página y publicarla en varios tamaños de pantalla sin sacrificar la calidad para dispositivos móviles/tabletas/computadoras de escritorio. Un simple medios Modernizr cheque consulta es a continuación:

if (Modernizr.mq('only screen and (max-width: 480px)')) { 
    Modernizr.load('/mobile.js'); 
} else if (Modernizr.mq('only screen and (max-width: 768px)')) { 
    Modernizr.load('/tablet.js'); 
} else { 
    Modernizr.load('/desktop.js'); 
}