必须补全移动端适配链路：①仅保留标准viewport声明；②body归零margin/padding并设box-sizing；③主容器显式设width:100%或max-width:100%，否则默认撑出视口致右偏、闪白边、滚动条异常。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你的网页在手机上出现文字图片整体右偏、滚动时右侧闪白边、缩放后突然多出水平滚动条——这不是 Muse Wonder Full 生成的 HTML 或 CSS 本身有错，而是它输出的代码默认继承了浏览器未重置的布局行为，必须在前端层补全移动端适配链路才能生效。
先堵住三个最常漏掉的硬伤
这三处不修复，后续所有样式调整都只是在掩盖问题。
第一步：确认页面 中存在且仅存在这一行 viewport 声明：<meta name="viewport" content="width=device-width, initial-scale=1.0">
删掉任何带 maximum-scale=1、user-scalable=no 或 shrink-to-fit=yes 的变体——它们会禁用 dvh 单位和 visualViewport API，导致键盘弹出时 100vh 高度卡死。
第二步：给 body 加强制归零样式：body { margin: 0; padding: 0; box-sizing: border-box; }
浏览器默认给 body 设 margin: 8px，缩放时这个固定像素会被放大，直接触发水平滚动。overflow-x: hidden 是无效掩耳盗铃操作，必须从源头清除。
第三步：检查 Muse Wonder Full 输出的容器是否显式设了 width: 100% 或 max-width: 100%。
若它生成了 <div class="content"> 却没写宽度控制，该 div 会按默认 inline-level 行为撑开，超出视口。<h2>修复文字/图片整体右偏</h2>
<p>这是未约束父容器宽度 + 未重置默认 margin 的典型组合结果。</p>
<p>方法一：用 Flexbox 重构外层区块（推荐）<br>给 Muse Wonder Full 输出的主容器（如 .page、.section、.hero）添加：<br><code>display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 100vw;
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
align-items: center 会让所有子元素（包括 img 和 p）水平居中；max-width: 100vw 能防止因 box-sizing 失效或字体渲染差异导致的微小溢出。
方法二：纯 CSS 一行修复（适合快速上线）
在全局样式顶部插入：* { box-sizing: border-box; } body > * { margin-left: auto; margin-right: auto; max-width: 100%; }
⚠️ 注意：这条通配规则会覆盖所有直接子元素的 margin-left/right，慎用于已有复杂浮动布局的老项目。
解决滚动时右侧空白或内容跳动
真机测试时，iOS Safari 滚动条会动态占用约 16px 宽度，导致 document.body.clientWidth 突然缩小，容器重排后内容右移。
① 给根滚动容器（通常是 body 或 #app）加：overflow-gutter: stable;
② 同时提供降级 fallback：@supports not (overflow-gutter: stable) { body { padding-right: calc(100vw - 100%); } }
calc(100vw - 100%) 会实时读取滚动条宽度差值，比写死 17px 更可靠；但注意该表达式在 iOS 15.4 以下不支持，需配合 JS 动态补偿。
③ 若使用第三方 UI 库（如 Vant、Ant Design Mobile），检查其内部组件是否用了 position: absolute 或 transform —— 这些会脱离 flex 流，导致父容器加 display: flow-root 也无效，必须单独重写该组件的定位逻辑。
