Android響應式用戶界面web應用程序

Question

我正在使用引導來製作響應式Web應用程序。

我開始做一些測試，在我的網站中有一個導航欄和一個窗體，問題是Android中的導航欄，因爲正在呈現全寬度（如桌面視圖）和chrome（android）顯示縮放，這不是響應式用戶界面背後的想法。

我也試過在我的Windows手機上，它的渲染是正確的，這發生在黑莓的網絡開發任務工具，它模擬了平板電腦或移動視圖。

所以，現在的問題是安卓...

我的導航欄的代碼是這樣的：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="{% url 'vetpet.views.index.showIndex' %}">Vetpet Alpha</a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Veterinarias <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="{% url 'crear' %}"><span class="fa fa-plus" style="color:green"></span>Agregar Veterinaria</a></li> 
         <li><a href="{% url 'lista' %}"><span class="fa fa-list " ></span>Listar</a></li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

Answer 1

你使用的引導基本模板？ http://getbootstrap.com/getting-started/#template

如果沒有，請確保您使用正確的視口設置。看看這個頁面： https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

另外請記住，css計算在4.4之前的androids默認瀏覽器中不可用。但是你可以使用一個解決方法（箱子大小，正面填充，負邊距）。

如果您不知道，可以使用chrome來模擬webkit移動設備。這還包括觸摸屏模擬，傳感器等，雖然它不是一個完美的模擬： https://developers.google.com/web/fundamentals/tools/test/emulator