¿Está bien usar jQuery para un diseño web receptivo?

11

Se me ha asignado la tarea de actualizar un sitio para que responda y aparezca correctamente en los teléfonos inteligentes. Desafortunadamente, el sitio en su forma actual no es muy fácil de trabajar, no puedo cambiar el CSS.

¿Se considera malo detectar el tamaño del navegador y hacer cambios en CSS con jQuery?

P.ej:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
css mobile jquery optimization responsive-webdesign MeltingDog
fuente
77
Debería considerar usar consultas de medios en su lugar porque es un estándar recomendado por W3C desde junio de 2012.
Zistoloen
¿Quieres cambiar las hojas de estilo? También pensé eso, pero aún tendría que alterar muchos elementos
MeltingDog
Si. En cualquier caso, creo que tendrá muchos cambios de CSS.
Zistoloen
2
La frase "Se me ha encomendado la tarea de actualizar un sitio para que responda" no debe ir seguida de "No puedo simplemente cambiar el CSS"
Francisco Presencia
44
todo necesita más jQuery ( Descargo de responsabilidad: no te lo tomes en serio )
Darkhogg

Respuestas:

13

Por supuesto. Obviamente, sería mejor usar CSS solo, pero si no puedes, usa lo que tienes. Haga todo lo que pueda con CSS y use JS según sea necesario. No estoy seguro de por qué no puede cambiar el CSS existente, pero puede agregar una hoja de estilo con JS.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

Fuente: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

luego enloquece con las consultas CSS / medios.

O con jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

He hecho 'máscaras' receptivas donde algunas cosas simplemente no eran posibles sin cambiar el DOM. Si no tiene acceso al HTML, la manipulación de JS DOM es a veces la única respuesta.

EDITAR:
Dependiendo de los requisitos visuales de su versión de pantalla pequeña, es posible que se sorprenda de hasta qué punto este fragmento de CSS lo llevará a 'dispositivos móviles'.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

Si el desarrollador de CSS original era demasiado aficionado !importanty no puede acceder al HTML, puede usar jQuery / JS para agregar una ID al cuerpo o contenedor de alto nivel y agregarlo a su selector.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
Será
fuente
Desde mi experiencia, el diseño receptivo se puede hacer solo con CSS. Tan pronto como su diseño también necesite adaptarse, probablemente también necesite Javascript. Tenga en cuenta que desea mantener el javascript lo más mínimo posible.
Marco
4

Yo diría que primero intente usar consultas de medios. Un método que encontré más fácil al tratar con un diseño que originalmente era solo para escritorio era este:

Comience con dos hojas de estilo separadas. Uno para el nuevo diseño receptivo y el otro para la versión de escritorio anterior:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

Todos los estilos antiguos pueden estar contenidos en el escritorio.css . Mientras tanto, puede comenzar desde cero en mobile.css . Puede descubrir que puede hacer un diseño agradable de una sola columna en ese CSS móvil que también funciona para tabletas.

Este enfoque le permite tener un nuevo comienzo y puede diseñar específicamente solo para móviles y tabletas y no dejar que los estilos de escritorio lleguen y anulen cosas. Puede ocultar / mostrar / colocar elementos según sea necesario solo para dispositivos móviles.

Si realmente necesita modificar el código del escritorio para que funcione con dispositivos móviles y de escritorio, puede refactorizar el marcado. Alternativamente, si encuentra que no puede refactorizar de manera realista el HTML para las versiones responsiva y móvil, puede colocar una clase en el código del escritorio, por ejemplo, la clase "escritorio" y usar CSS en la versión móvil para ocultarlo. Luego escriba un nuevo HTML para esa sección y dele un class="mobile". Luego, póngalo en consecuencia en mobile.css y escóndelo en desktop.css .

lanzallamas
fuente
3

Trabajé en un sitio que usaba ese método y tuve problemas con la rotación de la pantalla en dispositivos móviles. Dado que JavaScript solo detectará una vez en la carga de la página, si el usuario gira el dispositivo, no se expandirá al ancho completo como lo haría con las consultas de medios. En ese momento, fue más fácil para mí cambiar a CSS, pero quizás un experto en JS sabría si hay una manera de detectar un cambio en el ancho de la ventana gráfica. Parece que debería haber una manera con AJAX, pero estaría dispuesto a apostar que cualquier cosa que encuentre sería exagerada en lo que respecta al rendimiento, como describe megasteve.

stephanie
fuente
2

La capacidad de respuesta y "aparecen correctamente en los teléfonos inteligentes" son tareas completamente diferentes.

  1. Presumiblemente, la capacidad de respuesta se refiere a la eliminación, cuando sea posible, de viajes de ida y vuelta adicionales al servidor. La comprobación de errores, Ajax para recuperar los datos solicitados y la manipulación dinámica del DOM son las tareas que generalmente mejoran la capacidad de respuesta. El uso de JavaScript (o marco de JavaScript) es una forma efectiva de hacerlo. En los últimos años me mudé de JavaScript a jQuery para estas implementaciones. En muchos casos, jQuery tiene compatibilidad de navegador incorporada que tiene ventajas obvias. Los complementos para datepicker, autocompletar y menús ahorran horas de desarrollo.

No debería ser la principal fuente de estilo. Ese es el trabajo de CSS. Sin embargo, los dos se pueden usar juntos de manera efectiva. En un ejemplo simple, el texto puede tener un estilo diferente dependiendo de los resultados de alguna acción. jQuery se puede usar para cambiar la clase definida por CSS. 

$('#result').removeClass('red').addClass('green');
  1. Es tentador intentar reutilizar una página estándar para dispositivos móviles cambiando dinámicamente el estilo. Mi experiencia es que proporciona una solución insatisfactoria. El CSS es completamente diferente y se requieren diferentes secuencias de comandos del lado del cliente para aprovechar las características móviles. Mi preferencia es crear páginas HTML dedicadas separadas en lugar de una página que requiera lógica para seleccionar el estilo o las funciones que se utilizarán.
Stephanie Perry
fuente
El interlocutor mencionó "Diseño web receptivo" ( en.wikipedia.org/wiki/Responsive_web_design ), que se refiere al diseño para diferentes tamaños y capacidades de pantalla. Si bien no es específico para los teléfonos, este fue un gran factor para llevar esta técnica a la vanguardia.
Jacob Hume
1

Solíamos usar el popular marco 960.gs css para nuestros sitios.

Queríamos hacerlo receptivo.

Alguien había creado un complemento receptivo basado en JS para los 960 gs, por lo que pensamos por qué no solo usarlo, ya que no tendríamos que hacer ningún cambio en las plantillas del sitio estructural.

Funcionó, pero fue lento en la mayoría de los navegadores, incluidos los buenos. Por lo general, obtendría un "destello de contenido sin estilo" que variaría mucho según la complejidad de la página.

A pesar de que las soluciones JS funcionan, no son ideales, las consultas de medios CSS 3 son la mejor opción si es posible. Al final, simplemente volvimos a hacer las plantillas de nuestro sitio usando Twitter Bootstrap, que se ajustaba muy bien a nuestras necesidades.

Aunque podría ser atractivo tomar atajos, a menudo resulta ser más lento / doloroso a largo plazo.

megasteve4
fuente