diff --git a/web/index.html b/web/index.html
index fe325c5..ef74fd9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -59,7 +59,6 @@
         <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="打开侧栏">
           <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><rect y="4" width="24" height="2" rx="1" fill="currentColor"/><rect y="11" width="24" height="2" rx="1" fill="currentColor"/><rect y="18" width="24" height="2" rx="1" fill="currentColor"/></svg>
         </button>
-        <!-- 主内容居中区（房间名、成员数等）-->
         <div class="main-header-center" id="main-header-center">
           <!-- JS填充房间名、成员数等主内容 -->
         </div>
diff --git a/web/main.js b/web/main.js
index 6dee8e8..7023680 100644
--- a/web/main.js
+++ b/web/main.js
@@ -521,17 +521,26 @@ function renderMainHeader() {
     onlineCount += 1;
   }
   const safeRoomName = escapeHTML(roomName);
+  // 头部结构：更多按钮和右侧栏按钮互换位置，右侧栏按钮在最右侧
   document.getElementById("main-header").innerHTML = `
-    <div class="main-header-flex">
-      <div class="group-title group-title-bold">#${safeRoomName}</div>
-      <span class="main-header-members">${onlineCount} members</span>
+    <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="打开侧栏">
+      <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><rect y="4" width="24" height="2" rx="1" fill="currentColor"/><rect y="11" width="24" height="2" rx="1" fill="currentColor"/><rect y="18" width="24" height="2" rx="1" fill="currentColor"/></svg>
+    </button>
+    <div class="main-header-center" id="main-header-center">
+      <div class="main-header-flex">
+        <div class="group-title group-title-bold">#${safeRoomName}</div>
+        <span class="main-header-members">${onlineCount} members</span>
+      </div>
     </div>
     <div class="main-header-actions">
-      <button class="more-btn" id="more-btn" aria-label="More">
+      <button class="more-btn" id="more-btn" aria-label="更多选项">
         <span class="more-btn-dot"></span>
         <span class="more-btn-dot"></span>
         <span class="more-btn-dot"></span>
       </button>
+      <button class="mobile-info-btn" id="mobile-info-btn" aria-label="打开成员栏">
+        <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><rect x="11" y="10" width="2" height="6" rx="1" fill="currentColor"/><rect x="11" y="7" width="2" height="2" rx="1" fill="currentColor"/></svg>
+      </button>
       <div class="more-menu" id="more-menu">
         <div class="more-menu-item" data-action="share">Share</div>
         <div class="more-menu-item" data-action="exit">Quit</div>
@@ -539,6 +548,53 @@ function renderMainHeader() {
     </div>
   `;
   setupMoreBtnMenu();
+  // 重新绑定移动端按钮事件
+  const sidebar = document.getElementById('sidebar');
+  const rightbar = document.getElementById('rightbar');
+  const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+  const mobileInfoBtn = document.getElementById('mobile-info-btn');
+  const sidebarMask = document.getElementById('mobile-sidebar-mask');
+  const rightbarMask = document.getElementById('mobile-rightbar-mask');
+  function isMobile() {
+    return window.innerWidth <= 768;
+  }
+  function updateMobileBtnDisplay() {
+    if (isMobile()) {
+      if (mobileMenuBtn) mobileMenuBtn.style.display = 'flex';
+      if (mobileInfoBtn) mobileInfoBtn.style.display = 'flex';
+    } else {
+      if (mobileMenuBtn) mobileMenuBtn.style.display = 'none';
+      if (mobileInfoBtn) mobileInfoBtn.style.display = 'none';
+      if (sidebar) sidebar.classList.remove('mobile-open');
+      if (rightbar) rightbar.classList.remove('mobile-open');
+      if (sidebarMask) sidebarMask.classList.remove('active');
+      if (rightbarMask) rightbarMask.classList.remove('active');
+    }
+  }
+  updateMobileBtnDisplay();
+  window.addEventListener('resize', updateMobileBtnDisplay);
+  if (mobileMenuBtn && sidebar && sidebarMask) {
+    mobileMenuBtn.onclick = function(e) {
+      e.stopPropagation();
+      sidebar.classList.add('mobile-open');
+      sidebarMask.classList.add('active');
+    };
+    sidebarMask.onclick = function() {
+      sidebar.classList.remove('mobile-open');
+      sidebarMask.classList.remove('active');
+    };
+  }
+  if (mobileInfoBtn && rightbar && rightbarMask) {
+    mobileInfoBtn.onclick = function(e) {
+      e.stopPropagation();
+      rightbar.classList.add('mobile-open');
+      rightbarMask.classList.add('active');
+    };
+    rightbarMask.onclick = function() {
+      rightbar.classList.remove('mobile-open');
+      rightbarMask.classList.remove('active');
+    };
+  }
 }
 
 // 清空消息区（UI占位）
@@ -837,6 +893,7 @@ window.addEventListener('DOMContentLoaded', () => {
   const loginContainer = document.getElementById('login-container');
   const chatContainer = document.getElementById('chat-container');
   const loginForm = document.getElementById('login-form');
+
   if (loginForm) {
     loginForm.addEventListener('submit', loginFormHandler(null));
   }
@@ -916,7 +973,8 @@ window.addEventListener('DOMContentLoaded', () => {
   setupTabs();
   renderChatArea();
 
-  // 移动端侧栏/右栏按钮和遮罩逻辑
+  const sidebar = document.getElementById('sidebar');
+  const rightbar = document.getElementById('rightbar');
   const mobileMenuBtn = document.getElementById('mobile-menu-btn');
   const mobileInfoBtn = document.getElementById('mobile-info-btn');
   const sidebarMask = document.getElementById('mobile-sidebar-mask');
@@ -965,24 +1023,40 @@ window.addEventListener('DOMContentLoaded', () => {
       rightbarMask.classList.remove('active');
     };
   }
-  // 切换房间/成员时自动关闭侧栏
-  function closeMobilePanels() {
-    if (sidebar) sidebar.classList.remove('mobile-open');
-    if (sidebarMask) sidebarMask.classList.remove('active');
-    if (rightbar) rightbar.classList.remove('mobile-open');
-    if (rightbarMask) rightbarMask.classList.remove('active');
-  }
+  // 点击其它区域关闭侧栏/右栏
+  document.addEventListener('click', function(ev) {
+    if (!isMobile()) return;
+    if (sidebar && sidebar.classList.contains('mobile-open')) {
+      if (!sidebar.contains(ev.target) && ev.target !== mobileMenuBtn) {
+        sidebar.classList.remove('mobile-open');
+        sidebarMask.classList.remove('active');
+      }
+    }
+    if (rightbar && rightbar.classList.contains('mobile-open')) {
+      if (!rightbar.contains(ev.target) && ev.target !== mobileInfoBtn) {
+        rightbar.classList.remove('mobile-open');
+        rightbarMask.classList.remove('active');
+      }
+    }
+  });
+
   // 监听房间点击和成员tab点击
   const roomList = document.getElementById('room-list');
   if (roomList) {
     roomList.addEventListener('click', function() {
-      if (isMobile()) closeMobilePanels();
+      if (isMobile()) {
+        if (sidebar) sidebar.classList.remove('mobile-open');
+        if (sidebarMask) sidebarMask.classList.remove('active');
+      }
     });
   }
   const memberTabs = document.getElementById('member-tabs');
   if (memberTabs) {
     memberTabs.addEventListener('click', function() {
-      if (isMobile()) closeMobilePanels();
+      if (isMobile()) {
+        if (rightbar) rightbar.classList.remove('mobile-open');
+        if (rightbarMask) rightbarMask.classList.remove('active');
+      }
     });
   }
 });
\ No newline at end of file
diff --git a/web/style.css b/web/style.css
index b25b5a9..8cfc407 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1222,3 +1222,133 @@ body {
   cursor: grab;
   user-select: none;
 }
+
+@media (max-width: 768px) {
+  html, body {
+    width: 100vw;
+    height: 100vh;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow: hidden;
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    overscroll-behavior: none;
+    /* 不要强制 background: #fff;，避免覆盖主区域背景 */
+  }
+  .container {
+    width: 100vw;
+    height: 100vh;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    left: 0; top: 0;
+  }
+  .main {
+    width: 100vw;
+    height: 100vh;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    flex: 1 1 100%;
+  }
+  .chat-area {
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow-y: auto;
+    box-sizing: border-box;
+    background: none;
+    margin: 0;
+    padding: 16px 4px 8px 4px;
+  }
+  .chat-input-area {
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 5px 15px 10px 10px;
+  }
+  /* 防止页面被拖动 */
+  * {
+    touch-action: pan-y;
+  }
+  .sidebar,
+  .rightbar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    height: 100vh;
+    background: #fff;
+    transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.18s;
+    box-shadow: 2px 0 16px #0002;
+  }
+  .sidebar {
+    left: 0;
+    max-width: 70vw;
+    transform: translateX(-100%);
+    border-right: 1px solid #e0e0e0;
+  }
+  .sidebar.mobile-open {
+    transform: translateX(0);
+  }
+  .rightbar {
+    right: 0;
+    max-width: 70vw;
+    transform: translateX(100%);
+    border-left: 1px solid #e0e0e0;
+  }
+  .rightbar.mobile-open {
+    transform: translateX(0);
+  }
+  .mobile-sidebar-mask,
+  .mobile-rightbar-mask {
+    display: none;
+    position: fixed;
+    left: 0; top: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.18);
+    z-index: 999;
+  }
+  .mobile-sidebar-mask.active,
+  .mobile-rightbar-mask.active {
+    display: block;
+  }
+  .mobile-menu-btn,
+  .mobile-info-btn {
+    background: rgba(255, 255, 255, 0.85);
+    border: none;
+    align-items: center;
+    width: 38px;
+    height: 38px;
+    z-index: 1100;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: background 0.18s, box-shadow 0.18s, transform 0.22s cubic-bezier(.4,0,.2,1);
+    opacity: 1;
+    will-change: transform, opacity;
+    color: #707070;
+  }
+  .mobile-menu-btn:active,
+  .mobile-info-btn:active {
+    background: #e0e0e0;
+    transform: scale(0.93);
+  }
+  .settings-panel-card {
+    left: 2vw !important;
+  }
+}
\ No newline at end of file