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

header你有设置视口的东西吗？

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

Answer 2

我在 this link 上发现了此问题的修复方法。我在 NameCheap 上使用 url-iframe 转发 URL，这样我可以保持我的域地址可见，但 iframe 会转储元标记。因此，使用 url-redirect 重定向我的 url 是可行的，但是当我到达那里时，我看到了主机 url。希望这可以帮助遇到同样问题的其他人。

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

Bootstrap responsive navbar works when scaling in browser but doesn't when on my mobile

css

node.js

twitter-bootstrap

pug