问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Bootstrap 字体在移动设备上缩放太小

社区维基
1
新手上路，请多包涵

我花了很多时间在 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>

原文由 Jim Cooper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssbootstrap
阅读 465
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您应该始终从模板开始，例如“基本模板”( 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>

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

原文由 thebjorn 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

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

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

原文由 ziaprog 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题