¿Puede un sitio móvil de jquery ser también un sitio de navegador de escritorio?

Question

He creado un pequeño sitio móvil simple de jquery, pero también necesito un sitio muy similar para el tráfico basado en el navegador. De hecho, por el momento, los sitios son exactamente iguales, excepto que necesito limitar el ancho del sitio en el navegador a 650 px o menos.

¿Hay una manera simple de hacer esto? Me ahorraría muchas horas de tiempo de desarrollo.

Además, con la vista puesta en el futuro, sería de gran ayuda trabajar desde una única base de código común para el móvil y sitios basados ​​en navegador, con solo las diferencias mantenidas por separado. ¿Existe un marco o enfoque que pueda ayudarme a mantener mi código DRY?

Nota: Conozco this question, pero es un poco diferente, preguntando si jquery mobile se puede usar para el escritorio en su lugar del móvil. Quiero utilizar el mismo código para ambos.

Answer 1

Si quiere limitar el ancho de la página, solo es css. Puede cargar un solo archivo css para su sitio específico del navegador usando consultas de medios CSS.

Aquí hay un link que puede ayudarte.

Answer 2

Lo bueno de JQM es que le permite usar una única fuente en el escritorio y el dispositivo móvil, especialmente si el contenido es más o menos igual.

Para limitar su sitio de escritorio a 650 píxeles, puede utilizar los siguientes dos CSS-redes:

1140px CSS GRID
960px CSS GRID

Para obtener 650 píxeles sólo tiene que añadir algunos bloques vacíos antes y después de su contenido. En pantallas más pequeñas, su contenido se convertirá en ancho utilizando consultas de medios (para soporte en IE, asegúrese de incluir respond.js.

No he probado la grilla 960, pero estoy usando la grilla 1140px. También funciona con JQM collapsibles , que es un plus.