使用 Bootstrap CSS 的 HTML 无响应答案

【问题标题】：HTML Using Bootstrap CSS Not Responsive使用 Bootstrap CSS 的 HTML 无响应
【发布时间】：2013-09-16 18:31:56
【问题描述】：

我正在使用 Bootstrap 3.0 面板并试图找出页面在移动设备上没有响应的原因。它在桌面浏览器上正确显示，但在移动设备上没有优化。

Bootstrap 网站上的panel examples 确实在移动设备上显示优化。

我错过了什么吗？

这是html：

<!DOCTYPE html>
<html lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

  <title>a title</title>
  </head>

  <body>  
    <div class="container">
      <div class="row">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="media">
          <div class="media-body">
        <div class="row-fluid">
          <div class="row">
            <div class="col-md-12"><h1 class="media-heading">This is a heading using h1s.</h1></div>
          </div>
        </div>
        <br>
        <div class="row-fluid">
            <div class="span4 top-buffer">

            </div>
        </div>
          </div>
        </div>
        <br>
      </div>
    </div>
      </div>    
    </div>  
  </body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

看起来您在 HTML 的头部缺少一个视口标记。 Docs

像这样：

 <meta content='maximum-scale=1.0, initial-scale=1.0, width=device-width' name='viewport'>

如果您的文本太小而无法阅读，可能会认为禁用缩放是一个坏主意，但请注意在考虑不同用户的各种设备上对其进行测试。

【讨论】：

太棒了。就是这样！
是的，禁用缩放通常是一件坏事™。删除 maximum-scale=1.0, 以将其恢复 :)
这是一个真正的拯救者！