Bootstrap字体缩放在移动设备上太小 [英] Bootstrap font scaling too small on mobile
问题描述
我花了很多时间与基金会合作，花更少的时间使用Bootstrap。我有一个在Bootstrap响应的问题，我不明白，因为这似乎只是在基金会工作。问题是，虽然网格响应工作正如预期，我的字体被缩放为如此之小，以至于它几乎是不可移动的。注意在我的例子下面我设置字体大小为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 =stylesheettype =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>
基本模板（ http://getbootstrap.com/getting-started/#template ）。此工作原理如下：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =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 =stylesheettype =text / css/>
<！ - HTML5 shim和Respond.js for IE8支持HTML5元素和媒体查询 - >
<！ - 警告：如果您通过file：// - >查看页面，Respond.js不起作用。
<！ - [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（Bootstrap的JavaScript插件所必需的） - >
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
<！ - 包含所有编译的插件（如下），或根据需要包含单独的文件 - >
< script src =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"> ;</script>
< / body>
< / html>
这可能看起来像很多cruft，但一切都是有原因的。 p>
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.
The html to reproduce this is very simple, here is a jsbin: http://jsbin.com/lumepumufu/1/
And here's the 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>
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.
这篇关于Bootstrap字体缩放在移动设备上太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
