La página Bootstrap simple no responde en el iPhone

StackOverflow https://stackoverflow.com/questions/9386429

Pregunta

Descargué el ejemplo de Twitter Bootstrap y creé un proyecto de rieles simple con él.Copié el CSS donde fue necesario y se muestra bien.También copié el js y todo funciona muy bien en mi escritorio:reorganiza la página cuando cambio el tamaño de mi navegador.Cuando se utilizan algunas "herramientas de prueba de diseño receptivo" con diferentes tamaños, funciona muy bien.

El problema que tengo está en mi iPhone:se muestra como en mi escritorio.

Cuando pruebo la página de ejemplo de Bootstrap Hero (que es desde donde comencé), funciona muy bien en mi iPhone.

¿Qué puede salir mal?Prácticamente no he tocado ningún CSS, solo agregué un relleno en el pie de página.

Para su información, el CSS que cambié es que estoy vinculando mi aplicación a application.css con el siguiente contenido:

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}
¿Fue útil?

Solución

Asegúrate de agregar:

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

para usted <head>.

Tuve un problema similar y pensé erróneamente que era sólo una cuestión de ancho de la ventana gráfica.

Actualizar:consulte la respuesta de @NicolasBADIA para obtener una versión más completa.

Otros consejos

El código propuesto por frntk no funciona cuando se gira el dispositivo en vista horizontal, y la solución dada por virtualeyes es incorrecta porque usa punto y coma en lugar de comas.Aquí está el código correcto: 

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

Fuente: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Por supuesto, un caso de borde muy pequeño, pero vale la pena mencionarlo.

Si utiliza el reenvío de dominio a través de su proveedor de DNS, su sitio puede terminar envuelto en un iframe.GoDaddy, por ejemplo, usa esta técnica si estás enmascarando tu dominio y reenviando.

Estuve atrapado en este problema durante varias horas.

No olvides colocar también el contenido dentro de un <div class="container-fluid">...</div>

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top