Я пытаюсь сделать html.page с загрузочным твитом (НЕ реагирует). Я беру код для html footer отсюда Промывка нижнего колонтитула до нижней части страницы, twitter bootstrap
Но у меня есть некоторые проблемы:
- Ширина нижнего колонтитула на iPhone была меньше ширины содержимого. Я установил его добавление min-width (см. Его в main2.css).
- Теперь у меня другая проблема: Я установил метатег viewport и отключил bootstrap-responsive.css, но я не понимаю, почему вся страница не подходит для экрана на iPhone (это похоже на увеличение)? Как изменить масштаб по умолчанию?
- Я не могу уменьшить его. iPhone увеличит масштаб после завершения масштабирования. Я могу удалить метатег viewport, но есть ли другое решение?
Вот скриншот: 
(Это iOS симулятор, но на реальном телефоне это то же самое)
index.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*/
}