H5 移动适配 — Wilson's Knowledge Base

断点与布局

覆盖清单

所有修改遵循 「非侵入式」原则——不改 Quartz 源码，只通过 custom.scss 覆盖。升级 Quartz 版本时无需手动合并冲突。

覆盖项	做法	原因
隐藏知识图谱	`.graph { display: none !important }`	Canvas/WebGL 在移动端无法交互，占用渲染资源
隐藏页面标题	`.page-title { display: none }`	节省顶部空间，文章标题已经够用
排版缩小	标题 1.25rem，正文保持 Quartz 默认	移动端窄屏下过大标题浪费空间，但不过度缩水
触摸优化	`touch-action: manipulation`	消除 iOS Safari 双击缩放延迟，点击响应更快
Explorer 溢出	`.explorer:not(.collapsed) { overflow: visible }`	移动端 drawer 展开后内容被裁剪——Quartz 默认 `overflow:hidden` 会切断
文件夹缩进	`.folder-outer > ul { padding-left: 0.5rem }`	移动端多层嵌套缩进太大，标题被挤到只剩几个字
防水平滚动	`html,body { overflow-x: hidden }`	防止某些长内容溢出产生横向滚动条
内容区 padding	`.center { padding: 0 1rem }`	移动端左右留呼吸空间，文字不贴边
Backlinks 去重	桌面侧栏显示 / 移动端 afterBody 显示	避免同一份 Backlinks 在页面出现两次

设计原则

Quartz 优先

• 不改 Quartz 源码
• 只通过 custom.scss 覆盖
• 升级框架无冲突

最小改动

• 能不改就不改
• Quartz 默认的移动端体验已经很好
• 只修真正有痛点的交互

保守回退

• 删除 custom.scss 就能回到 Quartz 原生
• 不做不可逆的修改
• 每个覆盖都有明确理由

不跟风

• 不做自定义 drawer
• 不做自定义 backdrop
• Quartz 的移动端方案是经过验证的

核心原则：Let Quartz be Quartz。框架的移动端行为已经过充分测试——我们的定制应该像补丁，而不是重写。删掉 custom.scss 里的移动端块，站点依然正常运作，只是少了一些打磨。

相关文件

文件	作用
`quartz/styles/custom.scss` (L101-185)	全部移动端覆盖
`quartz/styles/variables.scss`	断点定义 ($mobile: 800px)
`quartz/layout.ts`	移动端网格布局定义