Fudoki 移动端 UX 优化实录日语文本分析工具从审计到上线的完整复盘【免费下载链接】fudokiAn interactive Japanese text analysis and speech synthesis web app项目地址: https://gitcode.com/gh_mirrors/fu/fudokiFudoki 是一款开源的日语文本分析工具集分词、词性标注、词典查询与语音朗读于一身非常适合日语学习者边读边查、边听边练。2026 年 8 月项目团队针对移动端做了一轮系统性的移动端 UX 优化从无头浏览器走查、Lighthouse 基线采集到逐项修复、验证上线形成了一条完整可复用的优化链路。这篇文章把整段实录整理成复盘无论你是想给自己的 Web 应用做移动端适配还是单纯好奇一次靠谱的移动端优化该怎么做都值得一看。为什么日语学习工具必须优先做好移动端Fudoki 的核心使用场景非常手机化在地铁上遇到一段不认识的日语复制进来点一下就能看到每个词的分词、读音、词性再点一下还能听标准发音。这类高频、碎片化的需求决定了移动端体验几乎就是产品的生命线。然而此前 Fudoki 的界面是为桌面端设计的直接拿到 390px 宽的手机上难免出现布局溢出、按钮太小、功能找不到等一连串问题。审计先行390×844 无头浏览器走查 Lighthouse 基线动工之前团队先在 Chromium headless 环境390×844 视口对 8 个关键页面逐屏截图形成一份分级问题清单完整记录在 移动端走查报告 AUDIT.md 中同时跑了一轮 Lighthouse v12 移动端基线结果记在 Lighthouse 基线 LIGHTHOUSE.md 里。审计的核心价值在于把感觉不好用翻译成可量化的缺陷并按影响面分级级别问题具体表现 P0登录页横向滚动浮动装饰定位越界scrollWidth 达 608px P0TTS 控制条不常驻滚动即消失无法边读边看 P1词典词卡无约束长词条超出视口宽度固定 320px P1触控目标过小大量按钮仅 20~28px低于 44px 标准 P2无移动端手势没有下拉刷新、没有滑动切文档 P2弹窗无安全区适配刘海屏下可能被状态栏遮挡P0 级修复先解决打不开、看不见的硬伤TTS 控制条改为底部常驻迷你条这是本轮优化中最关键的一处。修复前#headerPlayControl是文档流内的普通元素页面一滚动朗读控制条就消失修复后它变成position: fixed固定贴底并配合env(safe-area-inset-bottom)避开 iPhone 底部横条正文区域同步预留出 64px 高度避免遮挡。现在朗读时无论翻到哪一段播放/暂停、进度、语速都触手可及实现边听边读。登录页横向滚动与视口修复登录页的浮动装饰元素定位越界导致整页出现横向滚动条同时height:100vh在 iOS 地址栏收起时会出现跳变。修复方案是清理越界定位、引入dvh视口单位降级、补上viewport-fitcover并给登录页补齐 manifest、theme-color、apple-touch-icon 等 PWA 头部信息——这一步顺带把添加到主屏幕体验也做了。P1 级优化词典词卡、触控目标与编辑器工具栏词典词卡加约束不超屏、可滚动、不误触Fudoki 的词典词卡要展示词性、读音、释义甚至例句桌面端没问题手机上长词条会直接超出屏幕底部。优化后在 移动端样式 mobile.css 中对词卡加了max-width: calc(100vw - 24px)、max-height: 55dvh、内部滚动与overscroll-behavior: contain长释义还能独立折叠滚动不再撑破屏幕。触控目标全面提至 44px排序按钮、文档操作按钮、工具栏图标、搜索框等触控目标全部加到了 40~44px 以上播放/暂停按钮明确做到min-width/min-height: 44px输入框字号提到 16px 防止 iOS 聚焦自动放大。这一改动肉眼几乎看不出来但误触率明显下降。EasyMDE 工具栏精简 大号预览按钮移动端工具栏去掉了 link、image 等低频按钮预览切换按钮做成带预览/Preview/プレビュー多语言标签的醒目大按钮并由 移动端交互脚本 mobile-ux.js 动态注入标签文本编辑与预览的切换不再需要眯着眼睛找图标。软键盘弹出视口处理手机上唤起软键盘时布局视口高度骤降底部控制条会被顶得错乱。脚本监听visualViewport高度变化检测到键盘弹出就给body加kb-open类控制条自动改为 sticky 贴底、编辑器保持最小高度避免键盘和输入框互相遮挡。P2 级体验下拉刷新与左右滑切换文档移动端怎么能没有手势本轮为 Fudoki 补齐了两个高频手势下拉刷新——在抽屉的文档列表顶部下拉 72px 即触发刷新并带旋转动画指示器左右滑切换文档——在分析结果区域左滑/右滑即可在上一篇/下一篇文档之间切换且在选中文字或点击词卡时自动忽略避免误触。抽屉菜单本身也重新梳理了层级让文档管理更顺手。顺带完成的 PWA 可安装性得益于本轮补齐的登录页头部与安装入口Fudoki 现在可以顺畅地安装到手机桌面Android 端捕获beforeinstallprompt事件弹出安装 FAB 按钮iOS 端则每 7 天提示一次通过分享→添加到主屏幕完成安装。配合已有的manifest.jsonstandalone 192/512 双用途图标和service-worker.jsfudoki-cache-v2 缓存策略离线打开、全屏运行都已就绪。Lighthouse 基线解读数字背后的取舍修复后 Lighthouse 移动端基线中Best Practices 拿到满分 100CLS 布局稳定性为 0说明新增的固定控制条、词卡约束没有引入任何布局抖动这是本轮改动质量最直接的证据。Performance 分数只有 27但报告明确指出主因是本地无头环境下 Firebase SDK 与约 50MB 的 JMdict 离线词典分块加载所致——这是数据密集型应用离线词典 本地分词引擎的固有基线特征真机 Wi-Fi 环境下感知要好得多。这也提醒我们性能分数要结合应用类型解读不能唯分数论。复盘总结一次移动端优化的可复用流程回顾这次 Fudoki 移动端 UX 优化最值得借鉴的不是某一处代码而是这条完整闭环无头浏览器批量截图走查把问题分级为 P0~P3先修硬伤再谈体验Lighthouse 建立基线让后续每次改动都有可对比的量化指标修复遵循先约束后增强先保证不越界、不遮挡、不误触再叠加手势、PWA 等增强体验全程关注安全区与视口dvh、env(safe-area-inset-*)、visualViewport是移动端 Web 的三件套纯体验层解耦所有交互增强集中在 mobile-ux.js 一个文件不触碰数据与业务逻辑风险可控、回滚方便。从审计报告到修复上线的完整复盘就是上面这些。如果你也在做日语学习工具或任何需要移动端适配的 Web 应用这套走查 → 定基线 → 分级修复 → 数据验证的打法可以直接复制到自己的项目里。【免费下载链接】fudokiAn interactive Japanese text analysis and speech synthesis web app项目地址: https://gitcode.com/gh_mirrors/fu/fudoki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考