Html 移动设备上的引导字体缩放过小我花了很多时间与基金会合作，很少时间用Bootstrap进行工作。我在Bootstrap中有一个问题，我不理解，因为这似乎是工作的基础。问题是，尽管网格响应功能如预期般工作，但我的字体缩放得太小，在手机上几乎难以辨认。请注意，在我下面的示例中，我将字体大小设置为14px，但在移动设备上，字体大小变得非常小。你可以通过点击Chrome开发工具中的移动按钮看到这一点_Html_Css_Twitter Bootstrap

Html 移动设备上的引导字体缩放过小我花了很多时间与基金会合作，很少时间用Bootstrap进行工作。我在Bootstrap中有一个问题，我不理解，因为这似乎是工作的基础。问题是，尽管网格响应功能如预期般工作，但我的字体缩放得太小，在手机上几乎难以辨认。请注意，在我下面的示例中，我将字体大小设置为14px，但在移动设备上，字体大小变得非常小。你可以通过点击Chrome开发工具中的移动按钮看到这一点

html css twitter-bootstrap

Html 移动设备上的引导字体缩放过小我花了很多时间与基金会合作，很少时间用Bootstrap进行工作。我在Bootstrap中有一个问题，我不理解，因为这似乎是工作的基础。问题是，尽管网格响应功能如预期般工作，但我的字体缩放得太小，在手机上几乎难以辨认。请注意，在我下面的示例中，我将字体大小设置为14px，但在移动设备上，字体大小变得非常小。你可以通过点击Chrome开发工具中的移动按钮看到这一点,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,复制此内容的html非常简单，下面是一个jsbin：下面是html： <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body style="font-size:14px"> <d

复制此内容的html非常简单，下面是一个jsbin：

下面是html：

<html>
  <head>
    <link href="//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>


col-lg-4
col-lg-4
col-lg-4

您应该始终从模板开始，例如“基本模板”（）。这将按预期工作：

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


引导101模板
col-lg-4
col-lg-4
col-lg-4

它可能看起来有很多“粗糙”，但一切都是有原因的。

Bootstrap首先是移动的。Mobile first样式可以在整个库中找到，而不是在单独的文件中

要确保正确渲染和触摸缩放，请将视口元标记添加到头部

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

如果您正在运行rails应用程序，您可以尝试gem

我在小字体和小导航栏方面遇到问题，我的问题是在css中设置导航栏宽度，使用最大宽度而不是宽度解决了我的缩放问题

使用“rem”而不是px；（像素）；

比如.myclass{font-size:1rem；}

你处于怪癖模式。你的头标签中是否有视口元标签，比如

？@thebjorn我直接在手机上查看网站时得到了相同的结果。@ckuijjer我尝试过，但无论哪种方式都看到了相同的结果。我链接的jsbin没有这个功能。如果你在移动设备上查看jsbin，你会看到同样的东西（小字体）吗？试试你的页面。正如@ziaprog所说，关键是

所有东西都不存在是有原因的。这是一个CSS问题，没有必要仅为了这个目的而包含jquery或引导javascript。正如在评论和下面的答案中提到的，

是正确的答案。对于一个从引导开始的人来说，就像这个问题一样，我仍然觉得正确的方法是从提供的模板开始。随着您对内部工作的深入了解，您自然会根据项目的具体需求调整脚手架，但这将是开始学习引导的一种非常令人沮丧的方式。