網站設計和移動設備編碼

我正在努力爲移動設備開發一個網站。網站設計和移動設備編碼

我在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

網站設計和移動設備編碼

回答

相關問題