不使用iPad的基本水平菜单

Question

我很难获得一个简单的水平导航来工作/在iPad上看起来不错。这只是一个直线的水平菜单，没有下拉，所以没有必要担心的A:悬停(我知道它不适用于移动)。

该网站有twitter引导、jQuery和jQuery用户界面。该菜单不是一个主导航，而是一个选项卡菜单，用于允许人们筛选表中的数据(单击该选项将使其进入rest调用以获取新数据)

在桌面上，它显示菜单栏。在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;
}

<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>

Answer 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 */
}

然后将所需的样式添加到

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

}