背景介绍
之前在论坛里看到一个老哥发布的移动端，我使用了一下，感觉也不错。原帖如下:
用ai弄了个方便移动端浏览论坛的应用 - 老司機福利討論區 - 老司機論壇
他是用 Kotlin 写了一个原生 Android App，解析论坛 HTML 提取数据，再重新画了一套界面。好处是流畅，是原生 App，并且对多个子页面都进行了重绘。
但缺点是:只能跑在 Android 上，iOS 用不了，并且跟原版的论坛的样式差距有点大。
受此启发，我就想起了一直想做的一件事—— JavBus 论坛的移动端自适应方案。因为很喜欢论坛这个板块, 但是移动端没有自适应, 图看不全, 每次只能在电脑上看, 不太方便。于是就有了这个主题的想法, 但是自己太懒, 每周刷论坛时间都不够，就一直没有动手实现。今天在AI Coding的帮助下完成了, 分享给大家。
实现效果
目前完成了首页、板块列表页、帖子详情页这三种最常用页面的移动端适配。
剩下的如搜索页、个人中心页等还没有适配，后续有空再补上。
Greasyfork 链接:
[JavBus论坛移动端适配](https://greasyfork.org/zh-CN/scr ... F%E9%80%82%E9%85%8D)
上面的脚本网址如果不登录可能无法查看安装, 直达链接:
https://update.greasyfork.org/scripts/586700/JavBus%E8%AE%BA%E5%9D%9B%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D.user.js
无法安装的兄弟们, 我共享了百度网盘, 可以手动下载安装
通过网盘分享的文件：javbus-mobile.user.js
链接: https://pan.baidu.com/s/1Tl-D0pSUjaf8KzyvHf6LJA?pwd=2sae 提取码: 2sae
Android 使用方法
Via 浏览器 + 脚本导入
操作步骤:
Via 浏览器 > 设置 > 脚本 > + 下载脚本 > 填入网址 > 点击更新 > 启动脚本
效果如下:
iOS 使用方法
Safari + Userscripts App + 脚本导入
安装步骤：
1. 从 App Store 安装 [Userscripts]
2. 打开一次 Userscripts App，让它创建默认脚本目录。
3. 进入：`设置 → App → Safari → 扩展 → Userscripts`
4. 打开“允许扩展”，网站权限可以选择：
- 简单做法：始终允许所有网站
5. 打开 Greasyfork 脚本网址 > 会自动检测脚本 > 点击 tap install > 下滑, 点击确认安装
6. 打开 Safari 访问 JavBus，点击地址栏左侧的页面菜单 → Userscripts，确认脚本已启用，然后刷新网页。
效果如下:
PC 端
Chrome/Edge + Tampermonkey + 脚本导入
效果如下:
技术原理
考虑到跨平台、最小改动、容易实现等几个要素，最终选择的技术路线是:
纯前端方案，使用 Vanilla JS（原生 JavaScript）+ CSS 的方式，以用户脚本（Userscript）的形式在浏览器端运行，对论坛页面进行实时元素改造。
核心思路很简单: 论坛原本的 Discuz 页面是为 PC 端设计的。脚本做的事情就是——拦截页面加载，注入移动端 viewport，然后用大量 CSS 规则覆盖掉原页面的固定宽高布局，再通过 JS 修改部分元素结构，使其适配手机屏幕。大致的流程如图:
该方案的优点是:
1. 跨平台兼容: 只要是支持用户脚本的浏览器都能用，iOS 上的 Safari 、Android 上的 Via/X 浏览器、PC 上的 Chrome/Edge（通过 Tampermonkey）都可以
2. 体积小: 纯前端方案，无需后端支持，无需独立的 App
3. 在线热更新: 更新只需要更新脚本文件，浏览器可以实现自动在线热更新，无需重新安装应用
4. 最小改动: 与原始网站样式最契合——因为是在原页面基础上做覆盖，保留了论坛原本的设计语言
缺点自然也有:
性能受限于浏览器渲染，复杂页面（比如超长帖子）的滚动流畅度不如原生 App，而且有些论坛的交互功能（如点评弹窗）需要额外适配。
开发工具
整个脚本是用 Codex + VS Code 完成的，前后大概交互了 70 多轮，花费3天时间。前期主要用于研讨方案、制定详细计划，中后期就是逐个模块分析元素结构、编写 CSS 覆盖规则和 DOM 操作逻辑。
Codex 是主力, VSCode 我用来小修。JS 我也只是懂一点皮毛, 没有深入学过，只是粗浅地写过爬虫和html+js+css 网页。整个项目难点在于:
1. 方案选型，需要调研、比对不同的方案的优劣
2. 很难通过文字描述或者单纯的图片告诉AI工具, 要怎么实现效果; 还是通过html 元素定位的方式表达更精准
意见与反馈
大家用用看，有什么问题可以在评论区反馈，有 bug 也欢迎上报。反馈时请按以下格式:
手机类型 + 型号:
问题描述:
问题截图:
平时上班有点忙，大家见谅。有空的时候我会集中起来修复。
还没有评论，来抢沙发吧。