基本水平菜单在 iPad 上不起作用答案

【问题标题】：Basic Horizontal Menu not working on iPad基本水平菜单在 iPad 上不起作用
【发布时间】：2015-12-17 23:47:54
【问题描述】：

我无法让简单的水平导航在 iPad 上正常工作/看起来不错。这只是一个水平菜单，没有下拉菜单，因此无需担心 a:hover（我知道它不适用于移动设备）。

该网站有 twitter bootstrap、jQuery 和 jQuery UI。该菜单不是主导航，而是一个选项卡式菜单，用于允许人们过滤表格中的数据（单击该选项会导致它点击休息调用以获取新数据）

在桌面上，它显示菜单栏。在 iPad 上，它显示 UL 列表。我希望有这个固定的风格化。我不使用 Bootstrap 选项的原因是因为我需要菜单一直保留

CSS

ul.horizontalNav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.horizontalNav li {
    float: left;
}

ul.horizontalNav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.horizontalNav li a:hover {
    background-color: #999;
}

ul.horizontalNav li.active {
    background-color:#4CAF50;
}

ul.horizontalNav li {
    border-right: 1px solid #bbb;
}

ul.horizontalNav li:last-child {
    border-right: none;
}

ul.horizontalNav li {
    border-right: 1px solid #bbb;
}

ul.horizontalNav li:last-child {
    border-right: none;
}

HTML

<div id="CAFSummaryHeaderBar"> 
    <ul class="horizontalNav" id="CAFSummaryMenu">
        <li><a href="#All">All</a></li>
        <li><a href="#MyRequests">My Requests</a></li>
        <li><a href="#Draft">Drafts</a></li>
        <li><a href="#Review">In Admin Review</a></li>
        <li><a href="#Approval">Getting Approvals</a></li>
        <li><a href="#FollowUp">Follow Up</a></li>
        <li><a href="#Archived">Archived</a></li>
        <li><a href="#Abandoned">Abandoned</a></li>
    </ul>
</div>

【问题讨论】：

标签： jquery html css ipad drop-down-menu

【解决方案1】：

您是否尝试过为您的 CSS 使用媒体查询？

例如：

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

然后只需在 like 中添加所需的样式

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
ul.mylist {
my: style;
}

}

【讨论】：