手机上的自举字体缩放比例太小

我花了很多时间在Foundation上工作，而且在Bootstrap上工作的时间减少了。我在Bootstrap中遇到了一个问题，我不明白，因为这似乎只适用于Foundation。问题在于，尽管网格响应能够按预期工作，但我的字体变得非常小，以至于在移动设备上几乎无法辨认。请注意，在我的示例中，我将字体大小设置为14px，但在移动设备上，这变得非常小。您可以通过点击Chrome开发工具中的移动按钮来查看。手机上的自举字体缩放比例太小

重现，这是很简单的，这里的HTML是一种jsbin：http://jsbin.com/lumepumufu/1/

而这里的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>

来源

2015-01-02 Jim Cooper

你在怪癖模式。 – thebjorn

+18

您是否在head标签内部有一个视口meta标签，例如''？ – ckuijjer

@thebjorn我在手机上直接查看网站的结果相同。 –

你应该总是从一个模板，例如启动“基本模板”（http://getbootstrap.com/getting-started/#template）。这按预期工作：

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

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

来源

2015-01-02 19:38:24 thebjorn

+12

@ziaprog表示，关键是'' – jjmontes

因为某种原因，一切都不存在。这是一个CSS问题，没有必要为此唯一目的包含jquery或bootstrap javascript。正如在注释和下面的答案中提到的那样，''是正确的答案。 – kareblak

在开始使用Bootstrap的人的情况下，就像在这个问题中一样，我仍然认为正确的方法是从提供的模板开始。随着您对内部工作的深入理解，您将自然而然地将脚手架调整为您项目的特定需求，但这将是开始学习Bootstrap的非常令人沮丧的方式。 – thebjorn

Bootstrap是移动的第一。移动第一种样式可以在整个库中找到，而不是在单独的文件中找到。

为了确保适当的渲染和触控缩放，视口元标记添加到您的头上

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

来源

2015-05-26 13:19:07 ziaprog

这应该是被接受的答案 – Clint

这是应该接受的答案 – Aaron

如果你正在运行一个Rails应用程序，你可以尝试宝石rails_layout

来源

2017-03-31 12:03:47 Feuda

手机上的自举字体缩放比例太小

回答

相关问题