有沒有辦法解決iPad在我的網站上做什麼？

我最近採取了網頁設計，我絕不是專家。我正在爲自己開發這個網站，我似乎遇到了一些問題。這個網站在所有瀏覽器上看起來都差不多（它仍在開發中），我一直在研究平板電腦和手機特定的CSS。在對iPad進行測試時（我使用xCode iOS Sim），我注意到我的菜單欄不工作，除非是隨機時刻（通常是放大時）。我有一個家庭成員在他們的實體iPad上進行測試，他們根本無法使用導航欄。這個jsFiddle鏈接包含運行導航欄的html和css。我將花費接下來的幾個小時來處理這個問題，如果我弄明白這一點，我會更新或刪除這篇文章，但如果我不知道，任何幫助表示讚賞。有沒有辦法解決iPad在我的網站上做什麼？

這是僅html，CSS太長。

<h2><a href="/">Auburn PC Repair<br>& Building</a></h2> 
<div id="header-image"> 
    <h1></h1> 
</div> 

<nav id="buttonbar"> 
    <ul> 
     <li id="services-button"><div class="buttonHighlight"></div> 
      <a href="#" class="button"><h3>Our Services</h3><p>how can we help you</p></a> 
      <ul> 
       <li><a href="/services/pcrepair">PC Repair</a></li> 
       <li><a href="/services/mobiledev">Mobile Device</a></li> 
       <li><a href="/services/networking">Networking</a></li> 
       <li><a href="/services/pcbuilding">PC Building</a></li> 
      </ul> 
     </li> 
     <li id="contact-button"><div class="buttonHighlight"></div> 
      <a href="/contact" class="button"><h3>Contact Us</h3><p>phone and email</p></a> 
     </li> 
     <li id="about-button"><div class="buttonHighlight"></div> 
      <a href="/about" class="button"><h3>About Us</h3><p>all about us</p></a> 
     </li> 
    </ul> 
</nav>

編輯：navbar是圍繞www.panic.com/coda navbar設計的。它在iPad上運行得很好。編輯：目前的設置適用於所有非iOS設備。

來源

2013-03-12 ConfusedGent

您的導航依靠懸停事件觸發菜單內容出現。

懸停事件是由鼠標移動元素觸發的。

觸控設備（例如所有iOS設備）以及大多數（如果不是全部）當代智能手機和平板電腦都沒有鼠標，因此無法觸發懸停事件。

你不能在只使用CSS的現代觸摸設備上實現你想要的。

有各種與觸摸有關的事件可以使用JavaScript進行觸發和響應。您需要選擇不使用基於CSS的菜單觸發方法，而是使用基於JavaScript的方法，其中處理懸停和觸摸事件以生成您所需的菜單系統。

來源

2013-03-12 12:29:48

hove只是第一個菜單，我給了它一個「＃」，以便在觸摸設備上保持打開狀態。我用我的室友華碩平板電腦來測試功能，它工作得很好。它也適用於我的手機。（HTC Thunderbolt） – ConfusedGent 2013-03-12 12:39:54

有沒有辦法解決iPad在我的網站上做什麼？

回答

相關問題