Repository navigation
fix(layout): 桌面版不再因字体缩放掉进移动布局，PC 隐藏「常用功能」 - #95
Open
std-external wants to merge 1 commit into
Open
std-external wants to merge 1 commit into
std-external wants to merge 1 commit into
Conversation
- 移动布局改由平台决定（Tauri 判定为 Android 时才启用），不再用 (max-width: 760px) 判断。界面缩放走 WebView zoom，1100px 窗口在 150% 时 innerWidth 只有 733px，会把桌面用户切进侧栏隐藏 + 底部导航 的移动布局。 - Home 的「常用功能 / Quick access」只在移动布局渲染（桌面已有侧栏入口）。 验证：pnpm typecheck / pnpm build 通过；playwright 在 733px 视口 （=1100px 窗口 @150%）无底栏且无「常用功能」，android 390x844 仍保留。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
现象
Windows 桌面版 CeleMod 1.2.2 在把设置里的「字体缩放」调到 150% 后，整页变成安卓样式：侧栏消失、底部冒出「主页 / 搜索 / 管理 / 下载任务 / 更多」移动导航栏，窗口本身还是 1100px 宽。
根因
html[data-mobile-layout]控制（src/celemod-ui/src/styles/android.scss:84），而唯一的设置点是src/celemod-ui/src/tauri/window.ts：detectDesktopPlatform() === "android" || matchMedia("(max-width: 760px)").matchesApp.tsx:133-147调getCurrentWebview().setZoom(fontScale/100)，在 Windows 上最终是 WebView2 的SetZoomFactor（wrysrc/webview2/mod.rs:1392）。按微软文档，这会让window.innerWidth和页面布局一起变化。innerWidth = 733 < 760，命中移动断点。桌面窗口minWidth是 800（tauri.conf.json:20，逻辑像素），正常拖拽根本到不了 760，所以这个宽度分支实际上只在缩放时被误触发。改法
src/celemod-ui/src/tauri/window.ts：新增isMobileLayout()（= 平台为 Android），data-mobile-layout只按它设置，不再看 CSS 视口宽度；删掉matchMedia监听。src/celemod-ui/src/routes/Home.tsx：「常用功能 / Quick access」包在isMobileLayout()里，桌面不再渲染（侧栏已有同样入口），移动端保留。验证
pnpm typecheck、pnpm build均通过。playwright + 开发服务器（Tauri IPC 用 stub 兜底），改动后实测：
单独截图：修复前 733px · 修复后 733px · 修复后 390×844
回滚
单独 revert 本 PR 即可：改动只在前端两个文件，无配置/数据迁移。回滚后桌面版会恢复「缩放 150% 时进移动布局」的旧行为。
后续（不在本 PR 内）
「字体缩放」用 WebView zoom 实现会同时放大布局，除这个断点外
GameSelector.scss、Settings.scss、CrashAssistant.scss里的@media (max-width: 760px)也会被带偏；要彻底解决建议改成 CSSzoom或 rem 方案，另开 PR 再谈。