La página Simple Bootstrap no responde en el iPhone

84

Descargué el ejemplo de Twitter Bootstrap y creé un proyecto de rieles simple con él. Copié el CSS donde es 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 es en mi iPhone: se muestra juste como en mi escritorio.

Cuando pruebo la página de ejemplo de Bootstrap Hero (que es desde la que 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.

FYI, el CSS que cambié es que estoy vinculando mi aplicación application.csscon 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;
}
twitter-bootstrap responsive-design RaySF
fuente
¿Puedes publicar una página de prueba o algún código?
Andres Ilich
Responde para mí. ¿Por qué crees que no responde?
Jesse Wolgamott
@RaySF No puedo ver la causa de por qué no debería funcionar, aunque tengo algunos reparos sobre la @importregla que estás usando, pero eso es personal. ¿Puedes publicar un caso de prueba?
Andres Ilich
@JesseWolgamott no responde en mi iphone, cuando abro las dos páginas mencionadas anteriormente, los ejemplos oficiales funcionan bien (es decir, el menú no se muestra igual, por ejemplo) pero mi página se muestra como en un escritorio.
RaySF
1
@RaySF Debido a la naturaleza de mi trabajo, tuve que buscar formas de aumentar la compatibilidad y mejorar el rendimiento de hojas de estilo muy grandes que se apilaron utilizando el @importmétodo de notación. En el camino, encontré muchos problemas debido a esa técnica y descubrí que había un gran impacto en el rendimiento (y también muchos errores que no se podían explicar) que luego se corrigieron agregando las hojas de estilo utilizando la <link>etiqueta html . Dudas que luego fueron apoyadas por preguntas como esta aquí en SO.
Andres Ilich

Respuestas:

184

Asegúrate de agregar:

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

a tu <head>.

Tuve un problema similar y pensé erróneamente que era solo una cuestión de ancho de ventana.

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

Víctor López García
fuente
8
y esto, para que las vistas tanto vertical como horizontal funcionen: <meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;" />
virtualeyes
@virtualeyes, ¡gracias por el dato! ¿Alguna idea de cómo permitir el escalado del usuario y hacer que la vista de paisaje funcione correctamente?
Andrei
No, yo uso JQuery mobile, no soy un gran creyente en el diseño receptivo. Deje que el móvil sea móvil y las tabletas y más, el escritorio. Cualquier cosa en el medio, no importa ;-)
virtualeyes
111

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

Nicolás BADIA
fuente
4
Los ejemplos en el sitio oficial de Twitter Bootstrap deben actualizarse para usar esto.
wenbert
1
¡Gran aviso, gracias! Tuve un problema similar con el giro de la pantalla, ahora funciona como un encanto.
Mark Vital
8
¡Esta debería ser la respuesta aceptada!
Sheharyar
6

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

Si está utilizando 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.

anulable
fuente
2
Pasé horas tratando de resolver este problema y finalmente encontré este comentario. ¡Gracias!
Ed Shee
Este comentario hará muy feliz a un pequeño grupo de personas.
Nicolas Rojo
No veo un iframe envuelto, pero teniendo ese problema con las metaetiquetas correctas, ¿pueden ocultar el iframe de todos modos?
helle
3

Estuve atrapado en este problema durante varias horas.

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

dpigera
fuente
El container-fluidhizo el truco para mí!
Paula