Escala de fuente Bootstrap demasiado pequeña en dispositivos móviles

5 minutos de lectura

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>

  • 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

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">

avatar de usuario
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

avatar de usuario
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; }

¿Ha sido útil esta solución?