Sitio web receptivo reducido a ancho completo en dispositivos móviles

139

Estoy probando la barra de navegación de respuesta Bootstrap y tengo un sitio web de demostración . 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 de escritorio como el sitio web.

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

twitter-bootstrap user-interface twitter-bootstrap-3 responsive-design bootstrap-4 Lawphotog
fuente

Respuestas:

378

Agregue esto a su cabeza 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

Zim
fuente
1
He agregado este código en la sección de cabecera, pero no funciona para mi explorador de Internet predeterminado de Android. Puede consultarlo - www.freerechargeapp.com/index.html
santosh
Realmente no entiendo por qué para mí no funciona. En un sitio web funciona y en otro no. Y la estructura del código es similar con bootstrap reciente
bheatcoker
1
@Skelly: otras respuestas que he visto se omitieron maximum-scaley se usaron en 1.0lugar de 1. ¿Sabes si estas cosas hacen la diferencia?
onebree
1
Me salvaste :) Gracias.
Fatih
1
Gracias, dos años después, su publicación sigue siendo shiznizzle (sic.) Wal
Walt
17

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 pasar de retrato a paisaje y viceversa sea una experiencia de usuario mucho más agradable ya que con / height se adoptaría naturalmente debido a la posible escala automática.

Tom
fuente
Gracias, esto solucionó el problema de escalado en iPhone, y muestra el retrato y el paisaje de manera diferente (y correctamente).
SexxLuthor
0

Agregar esto para las personas que buscan este error para quienes la respuesta aceptada no funciona. Creo que este será un caso más raro, pero no obstante frustrante:

Si su página se procesa dentro de un conjunto de marcos (por ejemplo, encubrimiento de dominio), entonces colocar las metaetiquetas no ayudará. Debería colocarlos en la página del dominio de ocultamiento, al que puede tener acceso o no según su host DNS.

Día Davis Waterbury
fuente
0

Intente borrar el caché de su navegador y abra la página en una pestaña nueva. Esto a veces me resuelve el problema cada vez que sucede.

John Q.
fuente