菜单在Android设备上不显示

Question

所以我开发了一个菜单，它显示桌面或更大的平板电脑上的所有按钮，而移动设备上只有一个"菜单"按钮。奇怪的是，在每个android设备上，这个按钮在竖屏上是不显示的，而只在横屏上出现。在其他设备(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;
}
}

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