css - Bootstrap 响应式导航栏在浏览器中缩放时有效，但在我的手机上无效

Question

我有一个个人应用程序，我一直在使用 nodejs，用 jade 表达来构建 UI。该站点在浏览器和我尝试过的所有移动模拟器中缩放文件。该站点是 myrecipes.me，相关代码如下。

nav.navbar.navbar-default.navbar-fixed-top(role="navigation")
  .container-fluid
    .navbar-header
      button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand.title(href='#') 
        img(src='/img/myrecipelogo.png', alt='Main Image', height='40px')
    .navbar-collapse.collapse#navbar
      ul.nav.navbar-nav                
        li.dropdown
          a.dropdown-toggle#cocktailList(href='#', data-toggle='dropdown')
            | Drinks
            b.caret
          ul.dropdown-menu
            li
              a(href='../newrecipe') Add a Recipe 
            li.divider  
              each drink in drinks
                -if(drink.type == 'cocktail')
                  li
                    a.dropCockails(id="#{drink._id}")= drink.name
        li.dropdown
          a.dropdown-toggle#foodList(href='#', data-toggle='dropdown')
            | Food
            b.caret
          ul#dropFood.dropdown-menu
            li
              a(href='../newrecipe') Add a Recipe 
            li.divider
              each drink in drinks
                -if(drink.type == 'food')
                  li
                    a.dropCockails(id="#{drink._id}")= drink.name            

Answer 1

标题中是否有设置视口(viewport)的内容？

<meta name="viewport" content="width=device-width, initial-scale=1.0">