details标签不控制文字缩放，关键在于viewport设置、rem单位、js动态根字号及高dpr补偿；必须设width=device-width和initial-scale=1.0，用rem而非px/em，js实时计算html font-size，并对devicepixelratio>2做scale微调。
details 标签本身不控制文字缩放，它只是语义化容器；真正影响文字大小的是其中文本的 CSS 字体设置。所以问题本质是：如何让 details 里用到的字体（比如 summary 和内部 p）在不同屏幕下自适应缩放。
viewport 必须配齐 width=device-width 和 initial-scale=1.0
这是所有缩放逻辑的前提。漏掉 initial-scale=1.0，iOS Safari 会把 1rem 渲染成视觉上明显偏小的字号，details 里的文字也会跟着变糊变细。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须写，且放在最前面 - 不能只写
width=device-width—— 这会导致 iPhone 上字体“突然缩水”，且无法用 CSS 修复 - 不要加
user-scalable=no或maximum-scale=1.0：iOS 10+ 已屏蔽，还会触发可访问性警告
字体单位必须用 rem，不能直接写 px 或 em
details 和它的子元素（如 summary、p）要响应式缩放，就得依赖根字号变化。写死 font-size: 16px 或用 em 相对父级，都会断开与视口的联动。
- 给
summary写font-size: 1.2rem，给内部p写font-size: 1rem，这样它们会随html的font-size同步缩放 - 避免对
summary单独用clamp()，比如font-size: clamp(14px, 4vw, 18px)—— 小屏下计算值被截断，和页面其他rem文字节奏不一致，视觉割裂 - 如果要用
clamp()，仅限局部微调（比如让标题比正文多撑 0.2rem），不能替代根字号动态方案
JS 动态设置 html font-size 并监听 resize/orientationchange
只靠媒体查询分段设 html { font-size: ... }，断点之间字体跳变明显；平滑缩放必须 JS 实时计算。
- 在页面加载时立即执行一次：
document.documentElement.style.fontSize = (window.innerWidth / 375) * 16 + 'px'（以 375px 设计稿为基准） - 监听
resize和orientationchange：iOS Safari 横竖屏切换不触发resize，必须单独监听 - 注意：不要在
DOMContentLoaded之后才设置，否则白屏期会用浏览器默认 16px，造成首屏字体错乱
细节容易被忽略：DPR 高的设备需要额外补偿
在 iPhone 15 Pro、Pixel 8 等高 DPR 设备上，即使 viewport 和 rem 都对了，文字仍可能显得发虚或偏小——因为 CSS 像素被映射到多个物理像素，但字体渲染没自动加粗或放大。
- 简单补偿方式：用
transform: scale(1.05)微调summary，但仅限高 DPR 场景（需 JS 判断window.devicePixelRatio > 2） - 更稳妥的做法是配合系统字体设置，用
font-size: 1.2rem+line-height: 1.4+text-rendering: optimizeLegibility提升可读性 - 别试图用
target-densitydpi：Android 已废弃，Chrome 完全忽略，写了等于白写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
