有没有办法解决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在我的网站上做什么？

回答

相关问题