发表新帖
发表新帖

Bootstrap font scaling too small on mobile

后端 未结
关注
5 1398
执笔经年
执笔经年 2021-01-30 20:52

I\'ve spent a lot of time working with Foundation and less time working with Bootstrap. I\'m having an issue with responsiveness in Bootstrap that I don\'t understand because t

相关标签:
5条回答
  • 不思量自难忘°
    2021-01-30 20:57

    Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

    To ensure proper rendering and touch zooming, add the viewport meta tag to your head

    <meta name="viewport" content="width=device-width, initial-scale=1">
    0 讨论(0)
  • 既然无缘
    2021-01-30 20:57

    use "rem" instead of px; ( pixel ); like .myclass { font-size: 1rem; }

    0 讨论(0)
  • 孤街浪徒
    2021-01-30 20:58

    You should always start from a template, e.g. the "Basic template" (http://getbootstrap.com/getting-started/#template). This works as intended:

    <!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="//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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

    It might seem like a lot of "cruft", but everything is there for a reason.

    0 讨论(0)
  • 没有蜡笔的小新
    2021-01-30 21:14

    If you are running a rails app, you can try the gem rails_layout

    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-01-30 21:15

    i was having problems with small fonts and a small navbar, my problem was setting the navbar width in css, using max-width instead of just width solved my scaling problem

    0 讨论(0)
 看不清?
提交回复
热议问题