Al usar un diseño receptivo, ¿hay alguna manera de permitir que un usuario vea el sitio completo?Responsive Design: Permitir al usuario también ver el sitio completo
E.g. Están viendo en un iPhone, pero quieren ver el sitio completo. Hacen clic en el enlace "Sitio completo" y les muestra la versión 1024px.
Si está utilizando consultas de medios, solo aplique reglas debajo de un elemento de cuerpo que tenga la clase 'receptiva'.
@media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
Si el usuario no quiere ver el diseño sensible, basta con quitar la clase 'sensible' del elemento del cuerpo, anulando todas las reglas. También puede persistir la preferencia de los usuarios mediante cookies u otro método.
Demostración: http://jsbin.com/obaquq/edit#javascript,html
La reducción de la ventana a no más de 500 píxeles a su vez, el texto en blanco, y el azul de fondo. Esto es condicional en el cuerpo que tiene la clase 'receptiva'. Al hacer clic en el primer párrafo se alternará esta clase y, por lo tanto, alternará los efectos de la consulta de medios en sí.
No he intentado esto, pero pensé en este tema yo mismo. Me imagino que podría usar un selector de hojas de estilo que desactiva la hoja de estilo receptiva principal, dejando al usuario con la versión completa
Cambiar hojas de estilo no es un concepto nuevo. Aquí hay un artículo para ALA alrededor de 2001 que aborda las hojas de estilos de conmutación: http://www.alistapart.com/articles/alternate/
Me he estado preguntando sobre esto. Tuve éxito usando jQuery para modificar la etiqueta de la ventana gráfica, parece funcionar bastante bien por lo que puedo decir hasta ahora. No requiere hojas de estilo múltiples ni mucho CSS adicional.
Esta es una respuesta perfecta. Entonces, ¿estás diciendo que debería usar algo como jQuery para ver si es un dispositivo móvil, y luego agregar la clase receptiva? ¿O hacerlo de otra manera? –
@NicHubbard Comenzaría por defecto con un sitio receptivo, es decir, cargando la clase 'responsive' en el cuerpo de forma predeterminada. Las personas optan por no participar de la experiencia receptiva. – Sampson
@NicHubbard Luego use su consulta de medios para mostrar solo el enlace "Sitio completo" en pantallas más pequeñas, el enlace elimina la clase 'receptiva' –