引导响应式导航栏在浏览器中缩放时有效,但在手机上不起作用



我有一个我一直在使用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            

您的标题中有任何设置视口的东西吗?

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

我在此链接上发现了此问题的修复程序。我正在使用namecheap上的URL iframe转发URL,以便我可以保持域的地址可见,但是iFrame会倾倒元标记。因此,将我的URL重定向使用URL重新定向,但后来我看到了托管URL。希望这可以帮助其他人有同样的问题。

相关内容

最新更新