bes*_*ver 1 html css iphone mobile-safari responsive-design
我几乎完成了这个网站,但一个问题.在iphone(可能还有其他移动设备)上,页脚在底部向右短切,留下一个空白区域,即使我将页脚设置为最小宽度:100%.我不确定是什么导致了这一点,并希望得到任何帮助.您可以在这里访问该网站
我已将下面的HTML分解为基本要素.
<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;
}
谢谢!
编辑:
好的,我已经遵循了向网站添加视口元标记的建议.然而它让我更加困惑.它现在显示的方式太大了,页脚现在是一个在左下角呜咽的小方块,而不是显示缩放到屏幕的网站.我已经添加了这样的视口元标记
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
你可以在这里看到这个 我在某种程度上写视口元错了吗？错误的价值？
EDIT2:我也想指出的是,身体被延伸到视口的整个宽度,你可以看到,在这里: http://gloryillustration.com/tests/test9.html 如果我做的背景颜色身体灰色,所以你可以看到它只是行为不端的行为!我相信身体标签和div标签在这方面会表现相同,但他们不这样做？
使用viewport元标记在移动浏览器中支持您的网站.
这是一个很好的描述:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/
这里是关于github的一个很好的讨论(必须阅读第五条评论):
https://github.com/h5bp/html5-boilerplate/issues/1099
| 归档时间： |
|
| 查看次数： |
11863 次 |
| 最近记录： |