Menu responsive bootstrap para iPad

Escrito por Emmanuel Orozco el 20 enero , 2014

Muchas veces nos pasa que queremos hacer un menu responsive bootstrap para iPad y simplemente no funciona.

Cuando abrimos el sitio en el iPad, simplemente no cambia y se muestra como sitio de escritorio.

Esto lo podemos arreglar cambiando la configuración por defecto que trae botstrap 3.

Esto lo hacemos de la siguiente manera:

Vamos al sitio de Bootstrap 3 y hacemos click en “Customize”:

bootstrap-tutorial

Bajamos un poco; hasta la parte de Media queries breakpoints y cambiamos el valor de @screen-sm-min a 769px

bootstrap-tutorial2

Finalmente bajamos hasta el final y compilamos todo:

bootstrap-tutorial3

Y listo, actualizan sus archivos de Bootstrap en su folder de archivos.

Explicación de por que no funciona:

El iPad en modo portrait, tiene una resolución de 768 x 1024 px. Bootstrap tiene una configuración para que el breaking point sea a menos de 768px. Osea (767 px o menos). Por lo cual 768px NO ESTA INCLUIDO. Lo que hicimos fue aumentar un pixel el breaking point para que ahora si funcione en 768px del iPad. Y asi es como hacemos un menu responsive bootstrap para ipad.


Que opinas?