twitter-bootstrap - que - diseño web con bootstrap

El sitio web receptivo se amplió a todo su ancho en el móvil

Question

Estoy probando la barra de navegación de respuesta Bootstrap y tengo un sitio web de demo . Cuando cambio el tamaño del navegador en un escritorio, todo funciona bien, incluida la barra de navegación, que se convierte en menú plegable con un pequeño icono en la parte superior, en el que puedo hacer clic para ver más botones de menú.

Pero cuando lo probé desde un navegador móvil (lo probé en Chrome y el navegador de Internet en un Android), no vi el diseño receptivo. Solo pude ver una versión muy pequeña del escritorio como sitio web.

¿Alguien podría señalar lo que estoy haciendo mal?

Answer 1

Agregue esto a su cabeza de HTML ...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Esto le dice a los navegadores de dispositivos más pequeños cómo escalar la página. Puede leer más sobre esto aquí: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 2

como se sugiere aquí http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

Sería una opción aún mejor, ya que hace que vaya de un retrato a otro y una experiencia de usuario mucho más placentera, ya que con / height se adoptaría de forma natural debido a la posible escalación automática.