javascript - 用于 iPhone/平板电脑的 HTML 导航菜单

Question

我正在尝试创建一个可以在移动设备或更小的设备上使用的菜单，因为 ul 菜单在那些分辨率较低的设备上消失了。下面是我正在尝试使用的代码，但由于某种原因它无法正常工作。下拉框工作正常，但点击选项没有任何作用。

首先是 HTML:

<select> 
            <option value="" selected="selected">Select</option> 
            <option value="index.html">Home</option> 
            <option value="about.html">About Us</option> 
            <option value="testimonials.html">Testimonials</option> 
            <option value="events.html">Events</option> 
            <option value="contracts.html">Contracts</option> 
            <option value="faq.html">F.A.Q.</option> 
            <option value="contact.html">Contact Us</option> 
</select> 

现在，JS。

<script>$("select").change(function() {
window.location = $(this).find("option:selected").val();
});</script>

现在，CSS 在普通浏览器上隐藏它但在小型设备上显示它。

select
  {
  display:none;
  }

@media (max-width: 480px) {
  nav  { display: none; }
  select { display: inline-block; }
  }

我一次又一次地检查了我的编码，但我似乎无法让它工作。有人有什么想法吗？

Answer 1

Do iPhone / Android browsers support CSS @media handheld?

请参阅 CSS 中媒体查询的问题。您可以选择使用 Jquery 获取屏幕大小并反射(reflect) UI 级别的更改。

检查 iPhone 和平板电脑对 CSS3 媒体查询的兼容性。

hmhcreative 发布的 Jsfiddle 链接有效。它应该也适用于 iphone 或平板电脑。