details标签在平板上点不动，主因是viewport未正确配置导致点击热区过小，或ios/微信x5内核不支持嵌套、自定义箭头渲染异常；需确保meta标签置顶、禁用缩放限制、显式设置summary触控区域、降级处理嵌套及图标方案。
details标签在平板上点不动，大概率是viewport没配对
平板浏览器（尤其是 iOS Safari 和安卓 WebView）默认以桌面宽度（约 980px）渲染页面，details虽原生支持交互，但若 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 缺失或位置靠后，整个页面会缩成一小块，summary 实际可点击区域被压缩到几像素宽，肉眼可见“点了没反应”。
实操建议：
-
<meta>必须放在最顶部，早于所有<link rel="stylesheet">和<script></script> - 别加
user-scalable=no或maximum-scale=1.0—— 这会让双击缩放失效，且部分安卓平板会因此禁用 touch 事件穿透 - 用 Chrome DevTools 切换 “iPad Pro” 模拟器，检查右上角显示的 viewport 宽度：竖屏应为
768，横屏应为1024；若是980，说明 viewport 生效失败
summary点击热区太小，触控体验差
平板用户手指粗、误触多，而 summary 默认只把文字内容和少量内边距设为可点击区。直接点图标边缘、行首/行尾空白，常无响应，尤其在嵌套或浮动布局中更明显。
实操建议：
- 给
summary显式设display: block+padding: 12px 16px，确保最小触控尺寸 ≥ 44×44px - 内部图标用
display: flex; align-items: center对齐，别依赖vertical-align: middle（受行高干扰大） - 加
user-select: none防止双击选中文本导致折叠状态跳变 - 避免在
summary中直接放<img>或<svg></svg>—— 微信 X5 内核和部分安卓 WebView 会劫持点击事件，导致 toggle 失效
嵌套details在iPad和微信里直接失效
iOS Safari（≤17.4）和微信 Android（X5 内核 v8.0.4x 以下）根本不支持 details 嵌套。写成 <details><summary>一级</summary><details><summary>二级</summary></details></details> 后，常见症状包括：点二级时一级自动收起、二级 summary 完全无响应、Tab 键跳过某级、控制台监听不到 toggle 事件。
实操建议：
- 非嵌套不可？必须用 JS 同步 open 状态：监听父级
toggle，再手动设子级child.open = parent.open，且子级details必须是父级summary的**直接兄弟节点**（不能包在<p></p>或<div> 里） <li>更稳妥方案：UA 检测，识别 <code>Micromessenger或iOS，降级为<div class="accordion-item"><button role="button" aria-expanded="false"> 结构 <li>别试图用 CSS <code>details[open] > details控制嵌套样式——规范未定义行为，Safari 会忽略 - 统一清掉原生标记：
summary { list-style: none; } - 用
summary::before插入图标：content: "▶"; transition: transform .2s; - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - 别用
appearance: none或pointer-events: none—— 这会破坏键盘焦点和屏幕阅读器语义 - 如果必须兼容极旧设备（如 iOS 14），放弃伪元素，改用
background-image+padding-left模拟
自定义箭头在平板 Safari 上显示错乱
想用 summary::marker 替换小三角，在 iPad Safari（≤15.4）和部分安卓 WebView 中根本不会渲染；而 summary::-webkit-details-marker 在 Firefox 和旧 Edge 下无效。强行混用会导致图标重复、方向不翻转、或展开后仍显示“▶”。
实操建议：
details 最难缠的不是功能缺失，而是“看起来能用、点一下也动了、但下一秒就崩”——比如 Safari 里 JS 设置 open = true 后，内容闪一下又收起；或是微信里 summary 图标正常，但点击毫无反应。这些都不是代码写错了，而是底层实现差异没兜住。处理时优先保语义和可访问性，其次才是视觉一致。
