网站设计和移动设备编码

我正在努力为移动设备开发一个网站。网站设计和移动设备编码

我在iphone和ipad上测试，但我有一个ipad的问题。

我有以下代码：

<body> 
    <div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Project Name</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
      </ul> 
      </li> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 
    <div class="container"> 
    <div class="row-fluid"> 
     test 
    </div>

iPhone上的文字“测试”似乎正确定位在纵向和横向模式的导航栏下。但在水平模式下的ipad文本位于导航栏后面。

任何想法如何解决这个问题？

来源

2013-05-06 imperium2335

如果有'z-index'，请检查'.navbar'。如果有，请添加更高的数字并进行测试。如果没有，添加诸如'z-index：9999'的东西。用'.container'做同样的事，但加上'z-index：0;'。 – RaphaelDDL 2013-05-06 15:08:29

按照Bootstrap docs当您使用“导航栏固定顶” ..

“添加.navbar固定顶记得至少增加占隐藏区域其下方40像素填充的。一定要核心引导CSS后和可选响应CSS前添加此。“

所以，你可以包括身体PADD后您的自举responsive.css荷兰国际集团CSS像他们这样做的例子（http://twitter.github.io/bootstrap/examples/starter-template.html）

body {padding-top:40px}

或使用@media查询来调整身体的小屏幕（手机，平板电脑）

@media (min-width: 979px) { 
    body { 
     margin-top:40px; 
    } 
}

演示使用@media查询 ：http://bootply.com/60781

来源

2013-05-06 15:41:04 ZimSystem

网站设计和移动设备编码

回答

相关问题