如何仅在移动浏览器而非桌面浏览器中显示下拉菜单 link

Question

  <li class="megamenu-content">
    <div class="megamenu-content-wrapper clearfix">
      <ul class="col-lg-3  col-sm-3 col-md-3 ">
          <li class="cat-header">SHOW MEMBERS</li>
          <li><a class='dropdown-menu-link' href='/new-members/'>New Members</a></li>
          <li><a class='dropdown-menu-link' href='/old-members/'>Old Members</a></li>
          <li><a class='mobile-only' href='/main-page/'>Back to Page</a></li>         
       </ul>

    <script type="text/javascript">
          var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
           if(isMobile) {
            document.getElementById('mobile-only').innerHtml = "Back to page"
           }
        </script>

我试图仅在移动浏览器中显示下拉菜单中的内容，但它不起作用。如果你有什么不同的想法，也欢迎你:) 谢谢

Answer 1

将您的 mobile-only class 设置为 display:none

然后使用媒体查询指定您设备的浏览器宽度

@media screen and (max-width: mobile-width-here) {
    .mobile-only { display: block; }
}

如何仅在移动浏览器而非桌面浏览器中显示下拉菜单 link

How to display dropdown menu link in only mobile browser not desktop browsers

html

javascript

css

mobile-browser

drop-down-menu