响应式CSS - 如何在使用iPhone访问我的网站时自动调整填充?

时间:2012-08-26 16:49:51

标签: css

以下是我网站的链接: daisy.camorada.com 在<style>标记内有以下内容:

body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
} 

我有这个,所以不会在顶部的导航栏后面的信息,但是,你可以看到下面的截图,当我用iPhone访问我的网站时,顶部的填充(我认为这是问题)因为它推下了导航栏太多了。

如何让导航栏显示在普通浏览器和顶部的顶部? iPhone?! 我不认为这与我的其他.css文件存在冲突问题。在此先感谢您的帮助!

screenshot of both iphone and normal browser

2 个答案:

答案 0 :(得分:0)

问题是iOS在iOS 5之前不支持position: fixed;。请参阅Fixed positioning in Mobile Safari。您必须使用position: absolute;以及一些@media查询来有选择地将样式应用于移动浏览器。

答案 1 :(得分:0)

这是因为iPhone处理填充的方式不同(/愚蠢)。您想要删除Body填充并将其替换为:

top:60px;
position:absolute;