Bootstrap 3: ¿Qué tipo de grid usa cada dispositivo?

Una de las mejores novedades que trae Bootstrap 3 es la capacidad para adaptar su sistema de grid a los diferentes dispositivos y así facilitar los diseños “responsive” con muy poco coste en tiempo y esfuerzo. De este modo clasifican sus elementos de grid con un sufijo, dependiendo del dispositivo que se trate:

  • XS: Extra small devices Phones (<768px)
  • SM: Small devices Tablets (≥768px)
  • MD: Medium devices Desktops (≥992px)
  • LG: Large devices Desktops (≥1200px)

Puedes ver más detalles sobre cada uno y cómo utilizarlo en http://getbootstrap.com/css/#grid-options

El problema está en saber qué es un dispositivo small, large o medium, o qué resolución va a usar cada uno. El criterio más objetivo debería ser la resolución, pero tenemos tablets con resoluciones de 1024×768 y 10 pulgadas, y tenemos móviles de 4 pulgadas full HD (1920×1080). ¿En un móvil de 4 pulgadas se debería adaptar a los “Large devices Desktop (>1200px) mientras que la tablet sería un “Medioum Desktop Desktop >992px?

El resultado es que cuando hago un diseño y lo pruebo en mi Nexus 4 (1280px), usa el modo XS, pero cuando lo pruebo en mi Asus TF101 (1024px), usa MD, a pesar de tener menos resolución de pantalla. La razón es que dependiendo de cada dispositivo se utiliza un factor multiplicador de modo que compensa el aumento de resolución de pantalla con el tamaño real en centímetros. Así, un iPad normal (1024) y uno con Retina Display (2048) muestran del mismo tamaño los elementos, pero el segundo con el doble de resolución.

Como en realidad lo que queremos es que nuestro diseño se adapte perfectamente a los dispositivos, lo mejor es saber qué modo de Bootstrap 3 utiliza cada uno.

Utilizando Google Chrome Canary (una versión de Chrome para desarrolladores con herramientas especiales), se puede emular correctamente una buena cantidad de dispotivos móviles usando Google Chrome. Mi comprobación empírica es que es fiable totalmente. Para comprobarlo por ti mismo puedes seguir estas instrucciones: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Probando los más significativos he dado con este resultado usando Chrome para estos dispositivos:

  • Amazon Kindle Fire HD 7″ – SM
  • Amazon Kindle Fire /Fire HD 8.9″ – LG
  • BB PlayBook – MD
  • BB Z10 / Z30 – XS
  • HTC Evo, Touch HD, Desire HD, Desire – XS
  • IPAD 1/2/iPad Mini – MD
  • IPAD 3/4 – MD (En prueba real he podido comprobar que en realidad es SM…)
  • IPhone 3GS/4/5 – XS
  • Nexus 10 – LG
  • Nexus 7 / 7.2 – SM
  • Nexus S/4/5 – XS
  • Samsung Galaxy Note / S3 / S4 – XS
  • Sony Xperia S / Z – XS

O por la otra dimensión:

  • XS: BB Z10 / Z30; HTC Evo, Touch HD, Desire HD, Desire; IPhone 3GS/4/5; Nexus S/4/5; Samsung Galaxy Note / S3 / S4; Sony Xperia S
  • SM: Amazon Kindle Fire HD 7; Nexus 7 / 7.2
  • MD: BB PlayBook; IPAD 1/2/iPad Mini; IPAD 3/4
  • LG: Amazon Kindle Fire /Fire HD 8.9″; Nexus 10

* Estos datos están sacados del emulador de dispositivos de Chrome Canary. Se deberían probar en los dispositivos reales para estar completamente seguros…

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s