网页（用twitter bootstrap制作）在iPhone上放大，如何强制它适合iPhone屏幕？ [英] Web page (made with twitter bootstrap) zoomed in on iphone, how to force it to fit iPhone screen?
本文介绍了网页（用twitter bootstrap制作）在iPhone上放大，如何强制它适合iPhone屏幕？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用twitter bootstrap制作html.page（不响应）。我从这里抓取html页脚的代码刷新页脚到页面底部page，twitter bootstrap
但我遇到了一些问题：
- iPhone上的页脚宽度小于内容宽度。我修正了它加入最小宽度的问题（在main2.css中查看）
- 现在我遇到了另一个问题：
我已经设置了视口元标记并禁用了引导响应.css，但我不明白为什么整个页面不适合iPhone上的屏幕（它有点放大）？如何在默认情况下将其缩小？ - 我无法将其缩小。 iPhone停止缩放后，iPhone会将其放大。我可以删除视口元标记，但是还有其他解决方案吗？
- Footer width on iPhone was less than content width. I fixed it adding min-width (see it in main2.css)
- Now I've got another problem: I've set viewport meta tag and disable bootstrap-responsive.css, but I don't understand why the entire page does not fit the screen on iPhone (it's kinda zoomed in)? How to zoom it out by default?
- I can't zoom it out. iPhone zoom it in after I stop zooming. I could delete viewport meta tag, but is there any other solution?
index.html：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0>
<！ - Le风格 - >
< link rel =stylesheettype =text / csshref =assets / css / bootstrap.css/>
<！ - < link rel =stylesheettype =text / csshref =assets / css / bootstrap-responsive.css/> - >
< link rel =stylesheettype =text / csshref =assets / css / main2.css/>
<！ - HTML5 shim，用于支持HTML5元素的IE6-8 - >
<！ - [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 =mainclass =container clear-top>
< div class =row>
< div class =span12>
< p>您的内容在这里。您的内容在这里。您的内容在这里< / p>
< / div>
< / div>
< / div>
< / div>
< footer class =footer>
< div class =container>
< div class =row>
< div class =offset8 span4>
这是页脚文本。这是页脚文本。这是页脚文本。
< / div>
< / div>
< / div>
< / footer>
< / body>
< / html>
main2.css：
html，body {
height：100％;
}
#wrap {
最小高度：100％;
}
#main {
overflow：auto;
padding-bottom：150px; / *这需要大于页脚高度* /
}
.footer {
position：relative;
margin-top：-150px; / *页脚高度负值* /
height：150px;
明确：两者;
padding-top：20px;
背景：绿色;
宽度：100％;
min-width：940px; / *< - 此固定页脚宽度问题* /
}
解决方案更改您的视口元标记为：
< meta name =viewportcontent =width = 940，initial-scale = 1.0，maximum-scale = 1.0>
I try to make html.page with twitter bootstrap (NOT responsive). I grab code for html footer from here Flushing footer to bottom of the page, twitter bootstrap
But I've got some problems with it:
Here is a screenshot: (It's iOs simulator but on real phone it is the same)
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*/
}
解决方案
Change your viewport meta tag to:
<meta name="viewport" content="width=940, initial-scale=1.0, maximum-scale=1.0">
这篇关于网页（用twitter bootstrap制作）在iPhone上放大，如何强制它适合iPhone屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
