Cargar css dependiendo del dispositivo.
5 seguidores
Hola a todos, recientemente se me ha planteado una cuestión.
Tengo que hacer una web y que el cliente pueda gestionar la información de la misma, para ello he pensado en utilizar Joomla y hacer un CMS, el cliente también necesita que se visualize correctamente en móviles y tablets, para ello he pensado hacer CSS diferentes dependiendo del dispositivo desde el que se acceda, pero no se como cargar uno u otro dependiendo del caso y tampoco estoy seguro si será un planteamiento correcto...
Alguien puede asesorarme?, alguna solución?..
Muchas gracias de antemano!!...
Usuario desconocido
La forma más limpia es detectarlo desde el lado servidor con PHP -> http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/
Otra forma podría cargar una hoja de estilo básica por default y detectar el entorno con jquery y aplicarle la hoja de estilo más adecuada.
calcomedia
Pues llevas toda la razón guitobon no me había parado a pensarlo... y realmente es un problema importante para los dispositivos móviles...
Gracias por avisarme!!!
guitobon
Calcomedia, con tu mediaquery, el slider sigue existiendo aunque no se vea.
Es decir, el navegador carga todas las imagenes y toda la logica de funcionamiento (el js).
Eso puede llegar a ser 1Mb de "propina" facilmente.
yo de ti intentaria montarlo de otra forma o bien complementarlo para que eso no ocurra.
calcomedia
Buenas Alo,
Tal y como te comenta Pedro-Xitrus usando los @media puedes construir tu hoja de estilos para adaptarlo tanto a otros dispositivos como a cualquier tamaño de pantalla... te pongo un ejemplo práctico:
/* Slider ------------------------ */.homeslider { width:100%; background: #0194c8; border-top: groove #000000; border-bottom: groove #000000; }
@media only screen and (max-width: 767px) {
.flex-caption{display:none}
}
En una web tengo creado un slider de varias imágenes que, si la pantalla es pequeña, no me interesa que exista porque me descompondría el resto de objetos... pues uso el @media en mi hoja de estilos...
Así, por ejemplo, puedes hacer que una barra de menus se convierta en un botón donde seleccionar las opciones de navegación y adaptar tu contenido a dispositivos móviles...
Por cierto, muy bueno el manual de Pedro-Xitrus, muy descriptivo y sencillo de leer y asimilar.
Saludos!
alo
Ap!!. gracias de nuevo, voy a probar todo esto!!
Un saludo!!!
pedro-gutierrez
Esto se hace con @media querys () de la siguiente forma, por ejemplo:
si el navegador tiene más de 800px:
las imágenes tienen 200px de ancho
si el navegador tiene menos de 800px:
las imágenes tienen 120px
Y así con todo.
alo
Hola de nuevo!!!
He visto que en este ejemplo al redimensionar el navegador los elementos se van ajustando, colocando y escalandose al tamaño del navegador.
http://vasterad.com/themes/?theme=incredible
La ténica para realizar esto es detectar el dispositivo o cargar css mediante javascript detectando el tamaño del navegador???? o quizás existe otra manera...
Alguna sugerencia???
Gracias de antemano!!!!
alo
Gracias pedro_xitrus voy a echar un vistazo a ese manual ahora mismo y de paso a tu web, gracias por la rápida y efectiva respuesta!!!
Un saludo!!!
pedro-gutierrez
Si, se puede hacer eso perfectamente, en el <link> que añades el CSS puedes poner el atributo "media" y elejir para que dispositivo, o hacer @media querys en el CSS directamente, que yo te recomiendo esto porque puedes elegir a partir de que ancho de pantalla cambiar elemenos en el CSS.
Este es un manual que hice de como hacer lo que necesitas: http://xitrus.es/utilidades/Media_en_CSS
Fíjate en mi web, haz pequeña la ventana del navegador y veras que según el ancho cambian los elementos, es para crear el diseño responsivo y que se vea bien en dispositivos móviles.
Espero haber sido de ayuda.