He pasado mucho tiempo trabajando con Foundation y menos tiempo trabajando con Bootstrap. Tengo un problema con la capacidad de respuesta en Bootstrap que no entiendo porque esto parece funcionar en Foundation. El problema es que, si bien la capacidad de respuesta de la cuadrícula funciona como se esperaba, mis fuentes se escalan tanto que son casi ilegibles en dispositivos móviles. Observe en mi ejemplo a continuación que configuré el tamaño de fuente en 14 px, pero en dispositivos móviles esto se está volviendo muy pequeño. Puede ver esto haciendo clic en el botón móvil en las herramientas de desarrollo de Chrome.
El html para reproducir esto es muy simple, aquí hay un jsbin: http://jsbin.com/lumepumufu/1/
Y aquí está el html:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body style="font-size:14px">
<div class="container">
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
</div>
</body>
</html>
Bootstrap es móvil primero. Los primeros estilos móviles se pueden encontrar en toda la biblioteca en lugar de en archivos separados.
Para garantizar una representación adecuada y el zoom táctil, agregue la etiqueta meta de la ventana gráfica a su cabeza
<meta name="viewport" content="width=device-width, initial-scale=1">
thebjorn
Siempre debe comenzar con una plantilla, por ejemplo, la “Plantilla básica” (http://getbootstrap.com/getting-started/#template). Esto funciona según lo previsto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="font-size:14px">
<div class="container">
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Puede parecer un montón de “cruft”, pero todo está ahí por una razón.
-
como dijo @ziaprog, la clave estaba
<meta name="viewport" content="width=device-width, initial-scale=1">– jjmontes
31 de mayo de 2016 a las 17:38
-
No todo está ahí por una razón. Este es un problema de CSS y no es necesario incluir jquery o bootstrap javascript para este único propósito. Como se menciona en los comentarios y la respuesta a continuación,
<meta name="viewport" content="width=device-width, initial-scale=1">es la respuesta correcta.– kareblak
17 de noviembre de 2016 a las 9:54
-
En el contexto de alguien que está comenzando con Bootstrap, como es el caso de esta pregunta, sigo pensando que el enfoque correcto es comenzar con las plantillas provistas. A medida que obtenga una comprensión más profunda del funcionamiento interno, naturalmente adaptará el andamiaje a las necesidades específicas de su proyecto, pero esa sería una forma muy frustrante de comenzar a aprender Bootstrap.
– thebjorn
17/11/2016 a las 19:55
-
Para cualquiera que use este ejemplo, esta es definitivamente la mejor manera de hacerlo, PERO tenga en cuenta que los enlaces JS en la parte inferior están desactualizados: el CDN utilizado ahora es JSDeliver: puede acceder a los enlaces CDN actualizados aquí bootstrapcdn.com
– nc14
25 abr a las 9:50
Feuda
Si está ejecutando una aplicación de Rails, puede probar la gema diseño_rieles
estaba teniendo problemas con fuentes pequeñas y una barra de navegación pequeña, mi problema era establecer el ancho de la barra de navegación en css, usar el ancho máximo en lugar de solo el ancho resolvió mi problema de escala
use “rem” en lugar de px; (píxel); como .myclass { tamaño de fuente: 1rem; }
Estás en modo peculiaridades.
– thebjorn
2 de enero de 2015 a las 18:36
¿Tiene una metaetiqueta de ventana gráfica dentro de la etiqueta principal como
<meta name="viewport" content="width=device-width, initial-scale=1">?– ckuijjer
02/01/2015 a las 18:37
@thebjorn Obtengo el mismo resultado viendo el sitio directamente en mi teléfono.
–Jim Cooper
02/01/2015 a las 19:05
@ckuijjer Experimenté con eso, pero vi el mismo resultado de cualquier manera. El jsbin que vinculé no tiene eso. ¿Ves lo mismo (fuentes diminutas) si ves ese jsbin en un dispositivo móvil?
–Jim Cooper
02/01/2015 a las 19:05
Probar bootlinting tu pagina.
– cvrebert
3 de enero de 2015 a las 23:16