菜单未显示在 Android 设备上

Posted 2023-05-06

【中文标题】菜单未显示在 Android 设备上

【英文标题】：Menu not showing up on Android devices

【发布时间】：2021-05-24 18:37:45

【问题描述】：

所以我开发了一个菜单，其中显示了台式机或更大平板电脑上的所有按钮，而移动设备上只有一个“菜单”按钮。奇怪的是，在每台安卓设备上，按钮都不会出现在纵向上，而只会出现在横向上。在任何其他设备（iPhone、iPad、笔记本电脑等）上一切正常。可能是什么问题？

那是.CSS里面菜单相关的部分：

nav #menu 
      float: left;
      right: 80px;
      position: fixed;


nav #menu li 
      padding-left: 40px;
      display: inline-block;
      cursor: pointer;
      font-weight: 300;
      line-height: 80px;
      position: relative;
      transition: all 0.3s ease-out;


nav #menu li span 
      font-weight: 700;


nav #menu li a 
      color: #f0d0b5;


nav #menu li a:hover 
      text-decoration: none;
      color: #fff;


#toggle 
      position: absolute;
      right: 30px;
      top: 20px;
      font-weight: 300;
      z-index: 2;
      width: 30px;
      height: 30px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
      color: #f0d0b5;


.close-btn 
      position: absolute;
      right: 16px;
      font-weight: 300;
      z-index: 2;
      cursor: pointer;
      top: -2px;
      line-height: 80px;
      color: #f0d0b5;


#resize 
      z-index: 1;
      top: 0px;
      position: fixed;
      background: #0f0f0f;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;


#resize #menu 
      height: 90px;
      position: absolute;
      left: 45%;
      transform: translateX(-40%);
      text-align: center;
      display: table-cell;
      vertical-align: center;


#resize #menu li 
      display: block;
      text-align: center;
      padding: 10px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;


#resize li:nth-child(1) 
      margin-top: 140px;


#resize #menu li a 
      color: #f0d0b5;


#resize #menu li a:hover 
      text-decoration: none;
      color: #fff;


#resize.active 
      visibility: visible;
      opacity: 1;


@media(max-width: 768px) 
      #toggle 
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
            margin-right: 4px;
      

      nav #brand 
            margin-left: 24px;
      

      #menu a 
            font-size: 20px;
            font-weight: 300;
      

      #resize li span 
            font-weight: bolder;
      

      nav #menu 
            display: none;
      


@media(min-width: 768px) 
      #resize 
            visibility: hidden !important;
      

【问题讨论】：

你也可以发布你的html吗？

您可以在下面的下一条评论中看到它。

【参考方案1】：

关于这个菜单的 HTML 代码：

 <ul id="menu">
                        <li><a href="index.html">HOME<span>.</span></a></li>
                        <li><a href="#about" target="_blank">VIDEO<span>.</span></a></li>
                        <li><a href="#" target="_blank">FOTO<span>.</span></a></li>
                        <li><a href="#" target="_blank">BUY<span>.</span></a></li>
                        
                  </ul>

           
                  
                  <div id="toggle">
                        <div class="span">meniu</div>
                  </div> 

            </nav>

            <div id="resize">
                  <div class="close-btn">închide</div>

                  <ul id="menu">
                        <li><a href="index.html">HOME<span>.</span></a></li>
                        <li><a href="#about" target="_blank">VIDEO<span>.</span></a></li>
                        <li><a href="#" target="_blank">FOTO<span>.</span></a></li>
                        <li><a href="#" target="_blank">BUY<span>.</span></a></li>
                       
                  </ul>