为什么我的JavaScript子菜单系统无法正常打开且移动端布局错乱

问题根因 #

• viewport元标签错误放置在body标签内，移动端浏览器无法正常识别，导致初始布局缩放异常
• 菜单触摸事件没有限制执行环境，桌面端加载代码时找不到#box1元素会抛出JS异常，可能干扰样式加载逻辑
• 直接赋值className会覆盖元素原有所有类名，若移动端样式依赖其他基础类名就会导致布局错乱
• UA检测规则覆盖范围过窄，仅识别Android和Mac设备，遗漏iOS、Windows等常见设备的适配
• 未做桌面/移动端布局的互斥隐藏，两个布局结构同时存在可能导致样式冲突
• touchmove事件中全局禁用默认行为，会导致页面触摸到菜单区域时无法正常滑动

修复代码 #

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 修复：将viewport移到head内，保证移动端正常识别 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HOME</title>
<style>
/* 修复：默认隐藏两个布局，避免加载过程中出现样式错乱 */
#DESKTOP, #MOBILE {
    display: none;
}
</style>
</head>
<body onload="load_style()"> 
<script>
let isMobile = false; // 全局标记当前是否为移动端环境

function MOBILE_LAYOUT() {
    // 修复：补充移动端UA检测范围，覆盖iOS、安卓等常见移动设备
    if(/(Android|iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        isMobile = true;
        var mobile = document.createElement("link");
        mobile.rel = "stylesheet";
        mobile.type = "text/css";
        mobile.media = "all";
        mobile.href = "../mobileSTYLE.css";
        console.log("MOBILE LAYOUT CSS loaded.");

        document.head.appendChild(mobile);
        // 修复：显示移动端布局，隐藏桌面端布局
        document.getElementById("MOBILE").style.display = "block";
        document.getElementById("DESKTOP").style.display = "none";
    }
}

function DESKTOP_LAYOUT() {
    // 修复：非移动端设备默认加载桌面端样式
    if(!/(Android|iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        var desktop = document.createElement("link");
        desktop.rel = "stylesheet";
        desktop.type = "text/css";
        desktop.media = "all";
        desktop.href = "../DESKTOPstyle.css";
        console.log("DESKTOP LAYOUT CSS loaded.");

        document.head.appendChild(desktop);
        // 修复：显示桌面端布局，隐藏移动端布局
        document.getElementById("DESKTOP").style.display = "block";
        document.getElementById("MOBILE").style.display = "none";
    }
}
    
function load_style() {
    DESKTOP_LAYOUT();
    MOBILE_LAYOUT();
}

window.addEventListener('load', function(){
    // 修复：仅移动端环境绑定菜单触摸事件，避免桌面端报错
    if(!isMobile) return;

    var box1 = document.getElementById('box1')
    var startx = 0
    var starty = 0
    var dist = 0
    
    box1.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]
        startx = parseInt(touchobj.clientX)
        starty = parseInt(touchobj.clientY)
    }, false)
    
    box1.addEventListener('touchmove', function(e){ 
        var touchobj = e.changedTouches[0]
        var distX = parseInt(touchobj.clientX) - startx
        var distY = parseInt(touchobj.clientY) - starty
        // 修复：仅横向滑动时禁用默认行为，避免影响页面竖向滑动
        if (Math.abs(distX) > Math.abs(distY) && e.cancelable) {
            e.preventDefault();
        }
    }, false)
    
    box1.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        var distX = parseInt(touchobj.clientX) - startx
        var distY = parseInt(touchobj.clientY) - starty
        // 修复：仅点击（移动距离小于10px）时切换菜单状态，避免滑动误触发
        if(Math.abs(distX) < 10 && Math.abs(distY) <10) {
            // 修复：用classList切换类名，不会覆盖原有类
            box1.classList.toggle("OPEN_topmenu");
            box1.classList.toggle("OPEN_submenu");
            box1.classList.toggle("closedMENU");
            box1.classList.toggle("closedsubmenu");
        }
        e.preventDefault()
    }, false)
    
}, false)
</script>

<div id="DESKTOP">
<div id="WEBSITEbanner">
  <h1>HOME</h1>
</div>
<ul class="topmenu">
  <li class="submenu"><a href="../Art_Work.html"><b>Game
        Art Work</b></a>
    <ul>
      <li><a href="../Game_Art_Work.html#Monkey">
          Monkey</a></li>
      <li><a href="../Game_Art_Work.html#3D_Work">3D
          Work</a></li>
      <li><a href="">Cztery</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="../Games.html"><b>Games</b></a>
    <ul>
      <li><a href="">szesc</a></li>
      <li><a href="">siedem</a></li>
      <li><a href="">osiem</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="../Games_D.html"><b>Game
        D</b></a>
    <ul>
      <li><a href="">dziesiec</a></li>
      <li><a href="">jedenascie</a></li>
    </ul>
  </li>
</ul>

<div id="center">
  <div id="Services">
    <center>
      <h1><a name="#3D_Work">About Me</a></h1>
    </center>
    Hi,
    <p></p>
    Welcome to the website.
    <p></p>
    Welcome Description </div>
</div>

</div>
<p></p>
<div id="footer">
  <h3>Footer</h3>
</div>
</div>
<div id="MOBILE">
<div id="Hometitle">
  <h1>HOME</h1>
</div>
<ul class="closedMENU closedsubmenu" id="box1">
  <div id="MENU_heading_HIDDEN">Menu </div>
  <li id="MENU_heading_HIDDEN"><br>
    <a href="../Game_Art_Work.html">Game
      Art Work</a></li>
  <li id="MENU_heading_HIDDEN"><br>
    <a href="../Games.html">Games</a></li>
  <li id="MENU_heading_HIDDEN"><br>
    <a href="../Games_D.html">Game
      D</a></li>
</ul>
<div id="BLOG_ARTICLE_1">
  <div id="BLOGtitle"> Hi,<br>
    Welcome to the website.<br>
    <br>
    Welcome Description</div>
</div>
<br>
<div id="BLOG_ARTICLE_1">
  <div id="BLOGtitle">Footer </div>
</div>
<br>
</div>
</body>
</html>

效果参考 #

当前异常效果：

预期正常效果：

内容的提问来源于stack exchange，提问作者Formula 1