Html 移动设备上的 Bootstrap 字体缩放太小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27746811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap font scaling too small on mobile
提问by Jim Cooper
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 this just seems to work in Foundation. The issue is that, while the grid responsiveness works as expected, my fonts are getting scaled so tiny that it is almost illegible on mobile. Notice in my example below that I set the font size to 14px, but on mobile this is becoming very tiny. You can see this by clicking on the mobile button in the Chrome dev tools.
我花了很多时间在 Foundation 上工作，而在 Bootstrap 上工作的时间很少。我在 Bootstrap 中遇到了一个我不明白的响应问题，因为这似乎只适用于 Foundation。问题是，虽然网格响应按预期工作，但我的字体被缩放得如此之小，以至于在移动设备上几乎难以辨认。请注意，在下面的示例中，我将字体大小设置为 14px，但在移动设备上，这变得非常小。您可以通过单击 Chrome 开发工具中的移动按钮来查看这一点。
The html to reproduce this is very simple, here is a jsbin: http://jsbin.com/lumepumufu/1/
重现这个的html很简单，这里是一个jsbin：http://jsbin.com/lumepumufu/1/
And here's the html:
这是 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>
回答by ziaprog
Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
Bootstrap 首先是移动的。移动优先样式可以在整个库中找到，而不是在单独的文件中。
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">
回答by thebjorn
You should always start from a template, e.g. the "Basic template" (http://getbootstrap.com/getting-started/#template). This works as intended:
您应该始终从模板开始，例如“基本模板”（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>
It might seem like a lot of "cruft", but everything is there for a reason.
它可能看起来像很多“杂物”，但一切都是有原因的。
回答by Feuda
If you are running a rails app, you can try the gem rails_layout
如果你正在运行一个 rails 应用程序，你可以试试 gem rails_layout
回答by Fernando Itami
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
我遇到了小字体和小导航栏的问题，我的问题是在 css 中设置导航栏宽度，使用 max-width 而不是仅宽度解决了我的缩放问题
回答by kk4You
use "rem" instead of px; ( pixel ); like .myclass { font-size: 1rem; }
使用“rem”代替 px；（像素）；像 .myclass { font-size: 1rem; }
