Zurb基金會5 - 頂酒吧 - 摺疊小的瀏覽器窗口，但無法在手機上

已經從文檔頁面Zurb基金會5 - 頂酒吧 - 摺疊小的瀏覽器窗口，但無法在手機上

<nav class="top-bar" data-topbar role="navigation"> 
    <ul class="title-area"> 
    <li class="name"> 
[etc...] 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
    </ul>

舉起代碼隨之而來的結果是，坍塌一瀏覽器桌面窗口產生的菜單圖標和活動的子項鍊接。

它縮短了預期在Chrome中正常的桌面模式......但是訪問Chrome的開發者工具時所有移動效果圖不產生的菜單圖標（既不，顯然這兩個分項）。

驗證了各種問題...在body標籤的末尾加載所有基礎JavaScripts不會改變行爲。使用foundation.css之後加載的移動實例刪除具有自定義css類的文件不會改變行爲。除了robots.txt，沒有任何應用程序代碼可以調用user-agent。

以下可能有關，但我相信它來與基碼：

meta.foundation-mq-topbar { 
    font-family: "/only screen and (min-width:40.063em)/"; 
    width: 58.75em; }

所以被小桌面屏幕，但無法在手機上的人產生的菜單。

這怎麼解決？有沒有基礎配置，以某種方式禁用移動邏輯？

來源

2015-10-29 Jerome

您是否在實際移動設備上進行了測試？或者你只是使用Chrome開發工具來模擬移動屏幕？希望看到更好的故障排除鏈接，因爲可能會發生一些不同的事情。根據我的經驗，類似這樣的事情通常是由於缺少結尾的'div'標記或者將某個結束標記嵌套在它不應該是的東西之內。 – Waterpile

是的我已經使用移動瀏覽器（iOS 4和iOS5 Android 4.2.2）進行了測試，並且獲得了相同的結果。 staging.ride4.me是您可以使用的一個鏈接 – Jerome

我總是在菜單中使用Tab Bar，但它看起來像在文檔中，它按以下順序加載： ' < - 其他JS插件可以包括在這裏 - > ' 也許試試這個。 – Waterpile

不是預期的答案。和一個kludge啓動。但我還是無法查明原因的觸發是不出現（而在其他情況下，適當的樣式被應用到small視與基金會的CSS）。

本質換出一面帶dropdown，重新創建菜單。

SOOOO ...這是一個軌應用程序，使用與browser gem（條件if browser）和font awesome gem用於向產生漢堡包圖標更快路線的同時，以下是卓有成效的，呃...組裝機。

<!-- Right Nav Section --> 
<ul class="right"> 
<% if browser.mobile? %> 
    <li class="has-dropdown"> 
    <a href="#menu"><i class="fa fa-bars"></i> Menu</a> 
    <ul class="dropdown"> 
     <li class="active"> [etc.][etc.]

來源

2015-10-31 13:23:17 Jerome

Zurb基金會5 - 頂酒吧 - 摺疊小的瀏覽器窗口，但無法在手機上

回答

相關問題