/* ============================================================================= mobile-fix.css — 手机端适配补丁 ----------------------------------------------------------------------------- 独立文件，不修改源站构建产物 index-DH4Xca70.css。在 index.html 的末尾以引入，因此排在主样式之后，同权重下后者胜出，无需 !important。重新同步源站后需要做的事见 ../../CLAUDE.md「重新同步源站」。 ========================================================================== */ /* ----------------------------------------------------------------------------- 1. 媒体查询语法降级（本补丁最重要的一项）源站 CSS 由 Tailwind v4 生成，移动端断点写成 Media Queries Level 4 的 range 语法：@media (width<=960px) / @media (width<=640px)。该语法在下列环境中无法解析，整段规则会被**直接丢弃**，手机上会退回桌面布局（5 列价值观网格、300px 固定侧栏等）： - iOS Safari < 16.4（2023-03 之前） - Chrome < 104 / Firefox < 102 - 较旧内核的 Android WebView 与微信内置浏览器下面用传统 max-width 语法完整重述这两个断点。现代浏览器里两套规则同时命中且内容一致，不产生冲突；老浏览器只命中这一套。源站断点内容如有变化，这里必须同步修改。 -------------------------------------------------------------------------- */ @media (max-width: 960px) { .hero { min-height: 620px; } .identity-strip { grid-template-columns: 1fr; gap: 16px; } .value-grid { grid-template-columns: repeat(2, 1fr); } .value-card { border-bottom: 1px solid var(--line); } .reading-layout { grid-template-columns: 1fr; gap: 52px; } .toc { position: static; } .toc nav { border-bottom: 1px solid var(--line); max-height: none; display: flex; overflow-x: auto; } .toc nav button { border-bottom: 0; border-right: 1px solid var(--line); min-width: 190px; } .reading-head { grid-template-columns: 1fr; } } @media (max-width: 640px) { .topbar { height: 62px; padding: 0 20px; } .brand img { width: 154px; } .version { font-size: 11px; } .hero { min-height: auto; padding: 68px 22px 62px; } .hero h1 { margin-top: 26px; font-size: 47px; } .hero-copy { font-size: 17px; } .identity-strip, .value-system, .reading-layout, .decision-card { padding-left: 22px; padding-right: 22px; } .value-system { padding-top: 76px; padding-bottom: 82px; } .value-grid { grid-template-columns: 1fr; } .value-card { border-right: 0; min-height: 158px; } .value-card strong { margin-top: 28px; } .reading-layout { padding-top: 68px; padding-bottom: 86px; } .chapter-title { grid-template-columns: 38px 1fr 28px; } .chapter-content { padding-left: 38px; padding-right: 0; font-size: 16px; } .chapter-content table { white-space: normal; display: block; overflow-x: auto; } .decision-card { grid-template-columns: 1fr; gap: 38px; padding-top: 70px; padding-bottom: 76px; } footer { grid-template-columns: 1fr; gap: 16px; padding: 38px 22px 46px; } } /* ----------------------------------------------------------------------------- 2. 修复整页横向溢出（源站真实 bug，桌面端看不出来）现象：390px 视口下 document.scrollWidth = 2302px，整页可左右拖动。原因：≤960px 时 .toc nav 变成 display:flex + overflow-x:auto， 12 个章节按钮 min-width:190px 合计 2280px。但 .toc 是 grid 项、nav 是其子项，两者默认 min-width:auto，意味着「不得小于内容最小宽度」，于是 overflow-x:auto 无从生效， 2280px 被原样撑开，冒泡成整页溢出。修复：显式 min-width:0，让 flex 内容真正在 nav 内部横向滚动。效果：scrollWidth 2302 → 385（等于视口）。 -------------------------------------------------------------------------- */ .reading-layout > * { min-width: 0; } .toc, .toc nav { min-width: 0; max-width: 100%; } .toc nav { -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */ overscroll-behavior-x: contain; /* 滑到头不牵动整页 */ scrollbar-width: thin; } /* ----------------------------------------------------------------------------- 3. 表格：从「压扁」改为「可横向滚动」源站 ≤640px 已给表格加了 display:block + overflow-x:auto，但没有给内部列任何最小宽度，于是表格宽度被压到容器的 303px、并未触发滚动： 3 列中文表最窄单元格只有 45px（约 3 个字一行），可读性很差。给单元格设 min-width 后，内部匿名表格宽度超出容器，滚动才真正发生。仅在 ≤640px 生效，不影响桌面端表格布局。 -------------------------------------------------------------------------- */ @media (max-width: 640px) { .chapter-content table { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--line); } .chapter-content th, .chapter-content td { min-width: 132px; padding: 11px 12px; } /* 首列通常是短标签（渠道名 / 场景名），窄一些即可，把空间让给正文列 */ .chapter-content tr > :first-child { min-width: 96px; } } /* ----------------------------------------------------------------------------- 4. 锚点跳转被吸顶导航遮挡源站 .chapter{scroll-margin-top:96px} 是按桌面 72px topbar 定的；手机上 topbar 只有 62px，留白过多。按移动端高度重新取值。 -------------------------------------------------------------------------- */ @media (max-width: 640px) { .chapter { scroll-margin-top: 74px; } } /* ----------------------------------------------------------------------------- 5. 触摸设备：去掉 hover 残留态 .value-card:hover 有 translateY(-5px) + 变色。触摸屏上点击后 hover 态会一直粘住直到点别处，看起来像卡片错位。用 hover:none 精确排除触摸设备，鼠标设备不受影响。 -------------------------------------------------------------------------- */ @media (hover: none) { .value-card:hover { transform: none; background: #fff; } .value-card.active:hover { background: var(--blue); } .toc nav button:hover { color: inherit; } } /* ----------------------------------------------------------------------------- 6. 平板竖屏（641–960px）：决策清单双栏过挤 .decision-card 在该区间仍是 .9fr / 1.1fr 双栏 + 90px 间距， 700px 宽时正文列不足 280px。并入单栏。 -------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-width: 960px) { .decision-card { grid-template-columns: 1fr; gap: 40px; } } /* ----------------------------------------------------------------------------- 7. 窄屏机型（≤380px：iPhone SE 375、多数安卓 360）源站最小断点是 640px，360px 屏上标题 47px 会顶满整行、边距也偏大。 -------------------------------------------------------------------------- */ @media (max-width: 380px) { .hero { padding-left: 18px; padding-right: 18px; } .hero h1 { font-size: 38px; margin-top: 22px; } .hero-copy { font-size: 16px; } .hero-meta span { padding: 7px 11px; font-size: 12px; } .identity-strip, .value-system, .reading-layout, .decision-card { padding-left: 18px; padding-right: 18px; } footer { padding-left: 18px; padding-right: 18px; } .topbar { padding: 0 16px; } .brand img { width: 138px; } .toc nav button { min-width: 158px; font-size: 13px; } .chapter-title { grid-template-columns: 30px 1fr 24px; min-height: 84px; } .chapter-content { padding-left: 30px; } .chapter-content blockquote { padding: 16px 18px; font-size: 17px; } .decision-card li { grid-template-columns: 38px 1fr; font-size: 16px; } footer img { width: 176px; } } /* ----------------------------------------------------------------------------- 8. 刘海屏 / 横屏安全区 iPhone 横屏时左右会被刘海和圆角切掉内容。仅在支持 env() 的环境生效，用 max() 保证不小于原有内边距。 -------------------------------------------------------------------------- */ @supports (padding: max(0px, env(safe-area-inset-left))) { @media (max-width: 640px) { .topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .hero, .identity-strip, .value-system, .reading-layout, .decision-card, footer { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); } footer { padding-bottom: max(46px, env(safe-area-inset-bottom)); } } }