HTML中的details标签在移动端网页的常见应用-html教程-PHP中文网

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

details标签适合移动端faq等轻量折叠交互，但不适用于复杂导航；需确保summary为首个子元素、触控区≥44×44px、避免嵌套及内联图片，并为ios/微信降级为div+button方案。

html中的details标签在移动端网页的常见应用

details 标签在移动端网页里不是万能菜单开关，它适合做「可点开看详情」的轻量交互，比如 FAQ、参数说明、长文段落折叠——但别拿它当侧边栏或三级导航用，否则 iOS 和微信里大概率点不动。

用户点一次就展开、再点收起，这是 details 最稳的用法。关键不是“能不能动”，而是“点得准、读得懂、收得稳”。

summary 必须是 details 的第一个子元素，不能套在 <p></p> 或 <div> 里，否则 iOS Safari（≤17.4）直接不响应点击 <li>移动端触控热区至少 44×44px：<code>summary { padding: 16px; min-height: 44px; }
原生三角图标太小？别用 ::-webkit-details-marker，它在旧 Safari 里失效；统一用 summary::before { content: "▶"; } + details[open] summary::before { content: "▼"; }
避免在 summary 里放 <img> 或 <svg></svg>，微信 X5 内核会劫持点击事件；非要放，得加 pointer-events: none

原生 details 是硬显隐，没有滑动效果。要观感更顺，得靠 max-height 过渡，但不能瞎设值。

初始状态设 max-height: 80px; overflow: hidden;，过渡用 transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
展开时设一个“够大但不过头”的值，比如 max-height: 500px；别用 max-height: 100vh，安卓低端机容易卡顿
内容含图片？加 loading="lazy"，防止展开瞬间大量加载拖慢动画
别用 JS 直接改 style.height —— 它无法动画，且破坏 toggle 事件触发链

iOS Safari（直到 17.4）对嵌套 details 支持差，微信 Android X5 内核（尤其 v8.0.4x 以下）甚至完全忽略该标签。这时候修不如换。

用 UA 检测是否为 Micromessenger 或 iOS，是则渲染 <div class="accordion-item"> <button>标题</button><div class="content">...</div> 结构 <li> <code>button 必须带 role="button" 和动态 aria-expanded，否则 VoiceOver 读作“未命名按钮”
别把 details 当受控组件绑定 open 属性——Vue/React 里强行双向绑定会导致状态漂移
降级后用 classList.toggle('is-open') 控制显示，CSS 里用 .is-open .content { max-height: 500px; } 实现动画