1

我尝试使用 twitter bootstrap（不响应）制作 html.page。我从这里获取 html 页脚的代码Flushing footer to the bottom of the page, twitter bootstrap

但我有一些问题：

  1. iPhone 上的页脚宽度小于内容宽度。我修复了它添加最小宽度（在 main2.css 中查看）
  2. 现在我遇到了另一个问题：我设置了视口元标记并禁用了 bootstrap-responsive.css，但我不明白为什么整个页面不适合 iPhone 上的屏幕（有点放大）？如何默认缩小？
  3. 我不能缩小它。在我停止缩放后 iPhone 会放大它。我可以删除视口元标记，但还有其他解决方案吗？

这是一个截图：（在 iPhone 上放大的页面它是iOs模拟器，但在真手机上是一样的）

索引.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <!-- Le styles -->
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
        <!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" /> -->
        <link rel="stylesheet" type="text/css" href="assets/css/main2.css" />
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="wrap">
            <div id="main" class="container clear-top">
                <div class="row">
                    <div class="span12">
                        <p>Your content here. Your content here. Your content here</p>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="offset8 span4">
                        This is footer text. This is footer text. This is footer text. 
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>

main2.css：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
  background: green;
  width:100%;
  min-width: 940px; /*<-- this fixed footer width issue*/
}
4

2 回答 2

0

将您的视口元标记更改为：

<meta name="viewport" content="width=940, initial-scale=1.0, maximum-scale=1.0">
于 2014-11-05T14:29:05.017 回答
0

我很惊讶你说在第 1 点中，你通过使用min-width而不是min-width你应该写来解决你的问题，max-width因为你想将它限制在一定的宽度。

于 2014-03-09T08:04:33.777 回答