Bootstrap 3：移動導航在桌面上打開，但不在iPhone上打開？

我創建了幾個朋友的網站和我接近它的終點：Bootstrap 3：移動導航在桌面上打開，但不在iPhone上打開？

挑戰：當我點擊移動導航漢堡包菜單上，它會打開一個桌面上（使窗口瘦身測試）到目前爲止在Mac上使用FireFox，Safari，Chrome。但在iPhone 6 10.1.1上，選擇漢堡包菜單不會導致任何操作（尚未在Android上進行測試）。

我確實重新排列了這個設計的菜單，使其右對齊，並與另一個WordPress主題合併，這可能會導致一些我還沒有看到的問題。

的菜單中HTML：

<header id="nav"> 
    <div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="10"> 
    <div class="container"> 

     <a href="#" class="navbar-brand"><img alt="Hope Heals Counseling" src="/wp-content/themes/bootstrap-hope-heals/img/hope-heals-counseling2.png"></a> 

     <a class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <div class="navbar-collapse collapse"> 
     <ul id="menu-main-menu" class="nav pull-right navbar-nav"><li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-27 active active"><a href="http://hopetherapy.info/">Home</a></li> 
      <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://hopetherapy.info/answers/">Answers</a></li> 
      <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://hopetherapy.info/blog/">Blog</a></li> 
      <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://hopetherapy.info/contact/">Contact</a></li> 
      <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="tel:16164227787">Call: +1.616.422.7787</a></li> 
     </ul> 
     </div> 

    </div> 
    </div> 
</header>

上什麼可能導致漢堡包菜單沒有在iPhone上打開的任何想法？

來源

2016-11-12 Christopher Stevens

請問您可以發佈您的meta標籤嗎？ – Falk

當然。這裏是完整的模板鏈接：http://christopherstevens.cc/hopeheals/web2d/事實證明，我的原始設計模板，在合併到WordPress之前，有同樣的問題。鏈接的簡單代碼可以幫助更快地排查問題。 –

嗯，視口元標記在那裏。您的網站也適用於Android Note 6。我最近才瞭解到iPhone 5在某些情況下出現的錯誤：當不透明度應用於某些事物時，它不會顯示出來。我不知道這是否是原因。取而代之的是什麼？普通的導航欄是否停留在屏幕上？ – Falk

-1

它看起來像有一個控制檯錯誤，可能會影響JavaScript。這是產生錯誤的代碼：

jQuery(document).ready(function() { 

    //scroll to next section on home page 
    $("#goscroll").click(function(e) { 
    var offset = 50; 
    e.preventDefault(); 
    var dest = $("#services"); 

     $('html,body').animate({ scrollTop: window.innerHeight - offset }, 2500); 
     }); 

});

錯誤說明$是未定義的。定義$改變這一行

jQuery(document).ready(function()

要這樣：

jQuery(document).ready(function($)

這應該清除則錯誤校驗，看看導航之後的作品。

來源

2016-11-12 16:35:23 MikeL5799

讓我看看（並且我沒有-1你，謝謝你的評論） –

我試過你的解決方案，可以在http://www.christopherstevens.cc/hopeheals/web2d2上測試出來，沒有骰子這個時間。 –

有人已經爲我回答了這個問題，經過全新搜索後發現。我錯過了漢堡包菜單上的href =「＃」。 Full details here。

來源

2016-12-03 17:51:08

Bootstrap 3：移動導航在桌面上打開，但不在iPhone上打開？

回答

相關問題