Vuelvo del puente con fuerzas escribiendo sobre una librería javascript que nos permite adaptar nuestra web totalmente al dispositivo que está renderizando. DeviceJS permite escribir de una manera sencilla CSS y Javascript condicional basado en el sistema operativo del dispositivo (ios, android), la orientación del dispositivo y el tipo de dispositivo. Esta librería esta desarrollada por Matthew Hudson y podéis encontrarla en su repositorio: https://github.com/matthewhudson/device.js.
Indagando sobre el código fuente podemos ver como le categorización del dispositivo está basada en el useragent
|
1 2 3 |
// The client user agent string. // Lowercase, so we can use the more efficient indexOf(), instead of Regex userAgent = window.navigator.userAgent.toLowerCase(); |
Cuando estamos desarrollando una web hay que tener en cuenta la infinidad de combinaciones que podemos obtener a la hora de consultar nuestra web y debemos de adaptarnos a la mayoría de ellas, o al menos a las combinaciones que más visitan tu web (te puedes ayudar de Google Analytics para obtener esta información).
También puede resultar interesante poder ocultar funcionalidades o ejecutar diferentes scripts dinámicamente en función del dispositivo. Las posibilidades son infinitas y en tu imaginación se encuentran aquella que te pueden resultar útiles con el uso de esta librería.
CSS Condicional
Por defecto Device.js inserta clases CSS en el elemento <html> de tal manera que se pueden escribir reglas css basadas en esta herencia. De esta manera podemos hacer combinaciones como las siguientes:
|
1 2 3 |
.android.landscape #mylayer .ios.portrait #mylayer .mobile.android #mylayer |
Esto nos permite tener control sobre que y como vamos a mostrar el dom dependiendo del dispositivo.
Javascript Condicional
Además de la posibilidad de categorizar a través del css, también aporta una serie de métodos con los que puedes detectar el mismo tipo de combinaciones comentadas pero a nivel javascript. Algunos ejemplos que puedes utilizar en tu código son los siguientes:
|
1 2 3 4 |
device.iphone() device.android() device.television() device.landscape() |
Esta librería es ideal para implementar cambios en el interfaz y en el dispositivo que se esté presentando, pero no recomiendo utilizar esta librería si lo que necesitas es comprobar una característica o un navegador concreto. Para ello te recomiendo que eches un ojo a Modernzr, librería que permite saber si una funcionalidad HTML5 está disponible en tu navegador.
Personalmente, he utilizado esta librería cuando trabajé en un proyecto en el que construimos un lector de ebooks basado en Epub.js. Fue ideal dar el estilo y los controles adecuados cuando un lector comenzaba una lectura en android o en iOS, de tal manera que se ofrece un User Experience adaptado al dispositivo desde el que leía.
Repositorio de Device.js: https://github.com/
