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获取屏幕大小并反映UI级别的更改。

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

hmhcreative 发布的 Jsfiddle 链接正在运行。它也适用于iPhone或平板电脑。

适用于iphone /平板电脑的HTML导航菜单

1 个答案: