Pregunta La página simple de Bootstrap no responde en el iPhone


Descargué el ejemplo de Twitter Bootstrap y creé un proyecto de rieles simple con él. Copié el CSS donde sea necesario y se muestra bien. También copié el js y todo funciona 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 receptivas" con diferentes tamaños, funciona muy bien.

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

Cuando pruebo la página Bootstrap Hero Example (que es 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 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;
}

74
2018-02-21 22:37


origen


Respuestas:


Asegúrate de agregar:

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

para usted <head>.

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

Actualizar: echa un vistazo a @NicolasBADIA para obtener una versión más completa.


165
2018-02-23 04:37



El código propuesto por frntk no funciona cuando activa el dispositivo en la 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


103
2018-04-12 09:23



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

Si está utilizando el reenvío de dominios 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.


6
2017-07-16 00:04



Estuve atascado en este problema por varias horas.

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


2
2018-01-03 23:34



agregar en su etiqueta de la cabeza funciona bien receptivo en cualquier dispositivo, asegúrese de que agregue el que se usa para ancho completo con ajuste sensible


-3
2018-06-01 12:14