details窄屏竖排是因浏览器默认display:block且UA样式叠加导致，须重置display、summary margin及min-height三要素，不可仅依赖媒体查询调大小。
details 在窄屏下默认竖排、间距错乱、点不中——这不是写法错，是浏览器原生块级行为 + UA 样式叠加导致的布局坍塌。必须用 CSS 重置 display、margin、触控热区三要素，不能只靠媒体查询“调大小”。
窄屏下details为什么堆成一列而不是横排
浏览器把 details 当作 display: block 元素渲染，不管内容多短，它都独占一行、撑满父容器宽度。在 <nav> 或 <div class="menu"> 里并列写多个 details，结果就是竖着叠起来，像没加样式的 <div>。
- 别指望
flex-wrap: wrap修好它——details的块级特性会干扰主轴对齐，尤其在 iOS Safari 中容易换行错位 - 真正有效的做法是：窄屏（如
max-width: 767px）下直接放弃横向菜单，改用<select>下拉或单层details折叠结构 - 如果非要用横向排列，父容器必须设
display: flex或display: inline-flex，子项details设display: inline-flex（不是inline-block，后者在 Safari 中可能丢失热区）
summary 在手机上点不中的真实原因
iOS 和 Android 对触控目标有硬性要求：44×44px 是最低安全尺寸。summary 默认没有显式高度，文字短时（比如只写“☰”）热区远小于此，系统判定为“难点击”，尤其在微信 X5 内核里会直接忽略事件。
- 必须加
summary { min-height: 44px; padding: 0 12px; }，确保物理可点击区域达标 - 别用
line-height撑高——它只影响文字行高，不扩大点击热区；min-height才是关键 - 若用了
flex布局，记得加align-items: center，否则文字可能上下偏移，实际可点区域缩水
嵌套 details 在窄屏下的兼容性断崖
HTML5 规范未定义嵌套行为，iOS Safari ≤17.4 和微信 X5 内核（v8.0.4x 以下）会直接丢弃内层 open 属性，甚至点击二级 summary 导致一级意外收起。这不是样式问题，是解析层失效。
立即学习“前端免费学习笔记（深入）”；
- 窄屏下建议最多用两层嵌套：外层分类 → 内层条目；超过三层视觉缩进混乱，用户无法分辨归属
- 真要支持多级，必须用 JS 同步状态，且仅同步
open属性，不要操作style.display（否则破坏语义和屏幕阅读器识别） - 检测到微信或旧版 iOS 时，果断降级为
<div><button role="button" aria-expanded="false"></button></div>结构，别硬撑
窄屏优化最易被忽略的点：不是“怎么让它变小”，而是“怎么让它不依赖原生块级行为”。一旦开始用 display: flex 或 display: inline-flex，就要同步处理 summary 的 margin、min-height、focus 状态——漏掉任意一项，都会在某个机型上突然点不动或读不出状态。
