Talebook 移动端适配5 分钟把个人书库装进手机【免费下载链接】talebook一个简单好用的个人书库项目地址: https://gitcode.com/gh_mirrors/ta/talebook通勤路上想确认昨晚读到一半的那本书在不在库里而书库文件都放在家里的 NAS 上。Talebook 的移动适配就是为这种场景准备的前端基于 Nuxt 4 Vuetify 构建同一套页面在 6 英寸手机和桌面显示器上会切换成不同的列数、导航形态和对话框宽度不需要单独维护一个手机版。 同一书架三种排布手机上看书库列表最直观的感受是卡片从横向一行一本变成大屏上三列网格。这个行为写在书籍卡片的栅格属性里位于 app/components/BookCards.vue重点看xs/sm/md三行断点值v-col v-for(book,idx) in render_books cols12 xs12 !-- 手机一行一本 -- sm6 !-- 小屏一行两本 -- md4 !-- 中屏及以上一行三本 -- classbook-list-card Vuetify 的断点是按屏幕宽度自动匹配的所以改列数不需要任何 JavaScript 判断写死在模板属性里即可。封面图固定11/15的宽高比保证不同尺寸的封面在小屏上不会把卡片撑变形。 手机上的搜索框去哪了在桌面端搜索框常驻顶栏右侧到了手机宽度它被移进顶栏的扩展行#extension插槽点搜索按钮时执行一段很短的逻辑function do_mobile_search() { if (search.value.trim() ! ) { router.push(/search?name search.value.trim()); } else { mobile_search.value?.focus(); } }有内容就跳/search?name...没内容则只是把光标聚焦回输入框——这是个细节手机上误点按钮不会白跳一次页面。侧边导航在AppHeader.vue里设置了mobile-breakpointmd低于中屏宽度时它变成覆盖式抽屉由左上角汉堡按钮开关不占内容区空间。 三条命令手机上能打开部署本身和端无关按 docker-compose.yml 的默认配置跑起来8080 端口同时服务桌面和手机git clone https://gitcode.com/gh_mirrors/ta/talebook cd talebook docker compose up -d第一次访问会进入网页安装向导配置书库目录和管理员账号。书库数据挂在./data卷里之后在手机上访问的都是这一份数据不需要做任何移动端单独的初始化。⚙️ 两个值得注意的细节一是最外层视口配置app/nuxt.config.ts里写了user-scalableno即禁止用户手动双指缩放页面。代价是文字小的时候无法捏大收益是阅读器、抽屉这类自带滚动的组件不会被系统缩放打断。如果觉得字小更合理的做法是在阅读器内调字号而不是依赖页面缩放。二是小屏下对话框会放宽到 80% 屏宽桌面是 50%确认删除、填写表单一类弹窗在手机上不至于窄到换行错乱。另外一个小技巧如果手机里主要用来读 EPUB可以装一个 OPDS 客户端对接 Talebook 的 OPDS 接口阅读体验比浏览器内嵌阅读器更接近原生网页端则负责管理、检索和推送这类重操作各干各的。Talebook 的移动适配本质是把一套代码、按断点换挡做到位没有为手机单独开一个维护分支。想体验的话装完 Docker 后在浏览器里把窗口压到 390px 宽效果就等价于一部手机。【免费下载链接】talebook一个简单好用的个人书库项目地址: https://gitcode.com/gh_mirrors/ta/talebook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考