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?

— Lawphotog
fuente

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