页脚不会扩展到100％的宽度在iphone上，为什么？ [英] Footer will not extend to 100% width on iphone, why?
问题描述
我几乎完成了这个网站，但一个问题。在iphones（和可能的其他移动设备），页脚被切断短到底部向右，留下一个空白，即使我已设置页脚min-width：100％。我不确定是什么导致这一点，并希望任何帮助。您可以访问此处的网站
Im nearly finished with this website but for one problem. On iphones (and possibly other mobile devices) the footer is cut off short at the bottom to the right, leaving a white space, even though i've set the footer to min-width:100%. I'm unsure what is causing this and would appreciate any help on this. You can visit the website here
我已经中断了下面的HTML到要点。
I've broke down the HTML below to the essentials.
<body>
<div class="content">
<header>
<img />
</header>
<img />
<h3>Title</h3><br>
<p>
Paragraph
</p>
<div class="push"></div>
</div>
<div id="footer">
<a href="page.html">
<img />
</a>
<ul>
<li>
<h3>footer title</h3>
<p><a href="page.html">footer Link</a></p>
</li>
<li>
<h3>footer title</h3>
<p><a href="page.html">footer Link</a></p>
</li>
<li>
<h3>footer title</h3>
<p><a href="page.html">footer Link</a></p>
</li>
</ul>
<p>copyright text<a href="page.html">link</a></p>
</div>
</body>
和CSS
body{
text-align: center;
padding-top: 40px;
color: #333;
margin: 0px;
width: 100%;
min-width: 980px;
}
.content{
width:1080px;
margin: Auto;
}
#footer {
background-color: #000;
float: left;
height:250px;
min-width:100%;
margin-top:70px;
padding-top:45px;
}
#footer ul{
list-style:none;
padding: 0px;
margin-top:30px;
}
谢谢！
编辑：
好，我已经遵循了向网站添加视口元标记的建议。但是它使我更加混乱。而不是网站显示缩放到屏幕，其现在显示的方式太放大，页脚现在是一个小方块在左下角呜咽。我已经添加了视口元标记，像这样
Ok, i've followed the suggestions of adding a viewport meta tag to the website. However it's made it even more confusing for me. Instead of the website displaying scaled to the screen, its now displaying way too zoomed in and the footer is now a small square whimpering in the lower left corner. I've added the viewport meta tag like this
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
您可以在这里
我是以某种方式写视口元素吗？错误的值？
You can see this live here Am I writing the viewport meta wrong somehow? wrong values?
Edit2：
我也想指出，主体是延伸到视口，您可以在这里看到：
http://gloryillustration.com/tests/test9.html
在哪里我使身体的背景颜色灰色，所以你可以看到，它只是脚踏是行为不端！我认为body标签和div标签在这方面会有相同的行为，但它们不会？
I'd also like to point out that the body is extending to the full width of the viewport, you can see that here: http://gloryillustration.com/tests/test9.html Where i made the background colour of the body grey, so you can see that it's just the footer that is misbehaving! I would believe that body tags and div tags would behave the same in this respect but they don't?
推荐答案
使用viewport meta
Use viewport meta tag to make your website support in mobile browsers.
以下是有关此功能的详细说明：
Here is a great description about this:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/
&这里是一个伟大的讨论关于这一点在github（必须阅读第五条评论）：
& here is a great disscussion about this on github (must read the fifth comment):
https://github.com/h5bp/html5-boilerplate/issues/1099
这篇关于页脚不会扩展到100％的宽度在iphone上，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
