【发布时间】：2019-07-27 08:48:22
【问题描述】：
这是我为 735 像素或更小的窗口大小创建的移动菜单。移动菜单图标（右上角）不会显示在桌面版 Safari 或任何移动浏览器（包括 Chrome 和 Safari）中。我有一种感觉，我可能忽略了一些明显的东西，但我就是想不通。
可能与溢出有关：隐藏？我发现如果我在我的类 .mobilenav 中禁用它，菜单图标就会出现，但很明显，关闭图标也会出现。如果这是问题的根源，我该如何在保持菜单功能不变的情况下解决它？
适用于桌面的浏览器：Chrome 75.0.3770.142、Firefox 68.0、Edge 42.17134.1.0 不适用于桌面的浏览器：Safari 12.1.1 在移动设备上，它似乎不适用于任何浏览器。我检查了 Safari 和 Chrome。
// BEGIN MOBILE NAV
function openMobile() {
document.getElementById("myMobilenav").style.width = "100%";
document.getElementById("myMobilenav").style.borderLeft = "none";
}
function closeMobile() {
document.getElementById("myMobilenav").style.width = "0";
document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV
// MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("mobileactive");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
document.getElementById("myMobilenav").ontouchmove = function(e) {
e.preventDefault();
}body {
margin: 0;
}
@media (max-width:735px) {
.nav {
display: none;
}
.navcontainer {
display: none;
}
header.Header.Header--top {
display: none;
}
}
/* END MAIN NAV STYLE */
.mobilehead {
width: 120px !important;
display: block;
margin-left: 10px;
padding-top: -10px;
}
#mobilehead {
width: 100%;
height: 80px;
background-color: #e9e5fb;
border-bottom: solid 1px #000;
margin-bottom: 80px;
}
/* BEGIN MOBILE NAV STYLE */
.mobilenavcontainer {
height: 100%;
width: 0px;
background-color: #e9e5fb;
position: fixed;
top: 0;
right: 0;
z-index: 997;
}
#mobilemenuicon {
width: 80px;
height: auto;
z-index: 5000;
}
.mobilenav .mobilemenuicon {
top: 20px;
right: 18px;
position: fixed;
z-index: 50000;
}
#mobilecloseicon {
width: 80px;
}
.mobilenav .mobileclosebtn {
top: 20px;
right: 18px;
margin-left: 10px;
position: absolute;
}
.mobilenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
background-color: #e9e5fb;
overflow: hidden;
padding-top: 120px;
font-family: "AmerigoBT";
}
.mobilemainitems a {
text-decoration: none;
font-size: 3em;
color: #000;
display: block;
-webkit-text-stroke: .75px #000;
-webkit-text-fill-color: #e9e5fb;
line-height: 50px;
width: 180px;
}
.mobilemainitems {
padding-left: 30px;
padding-top: 0px;
margin-top: -96px;
}
.mobilesocialitems a {
text-decoration: none;
font-size: 1.5em;
color: #000;
display: inline-block;
font-weight: 400;
}
.mobilesocialitems {
padding-left: 30px;
line-height: 35px;
top: 480px;
position: absolute;
}
.row1social {
padding-left: 50px;
display: block;
width: 250px !important;
}
/* dropdown button */
.mobile-dropdown-btn {
font-family: "AmerigoBT";
text-decoration: none;
font-size: 18px !important;
color: #000;
display: block;
transition: 0.3s;
line-height: 54px;
border: none;
background: none;
width: 200px;
text-align: left;
outline: none;
margin-left: -11px !important;
padding-bottom: 5px;
}
/* active class for active dropdown button */
.mobileactive a {
background-color: none;
-webkit-text-stroke: .75px #000 !important;
-webkit-text-fill-color: #e9e5fb !important;
}
/* dropdown container */
.mobile-dropdown-container {
display: none;
background-color: none;
padding-left: 20px;
font-family: "UniversEx";
font-size: 11px;
padding-bottom: 20px;
}
.mobile-dropdown-container a {
line-height: 32px;
-webkit-text-fill-color: #000 !important;
-webkit-text-stroke: transparent !important;
}
.mobile-dropdown-container a:hover {
color: #000 !important;
-webkit-text-stroke: transparent !important;
}
@media (min-width:736px) {
.mobilenav {
display: none;
}
.mobilenavcontainer {
display: none;
}
#mobilehead {
display: none !important;
}
}<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>
<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
<a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a>
<div class="mobilemainitems">
<button class="mobile-dropdown-btn"><a href="#">Journal</a></button>
<div class="mobile-dropdown-container">
<a href="/journal">all</a>
<a href="/journal?category=design">design</a>
<a href="/journal?category=fashion">fashion</a>
<a href="/journal?category=personal">personal</a>
<a href="/journal?category=swoon">swoon</a>
<a href="/journal?category=travel">travel</a>
</div>
<a href="/work">Work</a>
<a href="/about">About</a>
<a href="#">Contact</a>
</div>
<div class="mobilesocialitems">
<div class="row1social">
<a href="#" target="_blank">Twitter</a>
<a href="#" target="_blank">Instagram</a>
</div>
<div class="row2social">
<a href="#" target="_blank">Pinterest</a>
<a href="#" target="_blank">Magazine</a>
<a href="#" target="_blank">Spotify</a>
</div>
</div>
</div>
<div class="mobilenavcontainer">
<span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->【问题讨论】：
-
@media (max-width:735px) { .nav { display: none; }使其在大型设备上消失。您可能希望在您的脑海中包含<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />，或类似的东西，因此比例也是正确的。 -
谢谢。我有一些类似于您在我的代码头部为完整菜单建议的内容，只是我没有碰巧在此处包含它。此菜单不会出现在大于 735 像素的尺寸上，因为它仅适用于移动设备，所以这不是问题。问题是，如果您在桌面浏览器中以或低于该尺寸的尺寸查看菜单图标，则该菜单图标不会以低于 736 像素的尺寸显示在 Safari 中（就像它应该出现的那样）。如果您尝试在 iPhone 上的 Safari 或 Chrome 中查看它，它也不会显示。菜单在那里并且正常运行，因为它应该是。但是打开菜单的图标不见了。
-
也许那个元标记不能胜任这项工作，但它可能是你的屏幕比你想象的要大。 javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
标签： javascript html css safari