text-size-adjust: 100%必须写在body上，因ios safari对小于16px文本强制放大，该行为绕过css层，仅作用于body才生效；需同时声明-webkit-、-ms-及标准属性，且不可用none值。
为什么text-size-adjust: 100%必须写在body上
移动端字体放大错位，常被归咎于用户操作，但真正触发点是浏览器对小字号文本的自动干预——iOS Safari 默认会对 font-size 小于 16px 的文本强制放大，哪怕你写了 rem 或 px。这个行为不走 CSS cascade，而是底层渲染层直接重设行盒高度，导致父容器撑开、浮动错位、Grid 轨道计算失准。
只给某个 p 或 div 加 -webkit-text-size-adjust: 100% 没用，它必须作用在 body 才能覆盖默认策略。而且不能写 none，iOS 13+ 已废弃该值，且会破坏系统字体设置；100% 是唯一兼容又保留可访问性的写法。
body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }- 不要加到
html或:root，部分 Android WebView 对伪根元素不生效 - 若用 Vue/React，确保这段 CSS 在首屏 HTML 中内联或早于 JS 加载，否则 hydration 前已错位
flex-shrink: 0 不是万能解，得看它和谁一起用
字体放大后，Flex 子项被压缩变形（按钮变窄、图标挤扁），表面看是 flex-shrink 在作祟，但真正问题常出在它和 width、flex-basis 的组合逻辑上。
flex-shrink: 0 只保证“不主动让出空间”，但如果子项本身 width 写死为 44px，而父容器因字体放大后实际宽度变小，它仍会溢出或触发换行——此时错位不是压缩导致，而是溢出导致。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 固定尺寸项（如图标、开关）优先用
flex: 0 0 auto，比单独写flex-shrink: 0更明确 - 搭配
min-width: 44px（满足 WCAG 最小点击区域），防止单纯靠flex-basis失效 - 避免
flex-basis: 100%+flex-shrink: 0，百分比值在缩放时仍会波动，应改用flex-basis: 44px
Grid 轨道别混用 rem 和 fr，错位是算出来的
字体缩放时 Grid 错位，不是渲染 bug，是单位混用导致轨道尺寸被“算歪”。比如 grid-template-rows: 2rem 1fr minmax(6rem, auto)，缩放 150% 后，2rem 变成 48px，但 1fr 仍按剩余空间均分，二者比例崩塌。
Grid 的稳定性来自刚性结构，不是弹性响应。想让它扛住缩放，就得切断相对单位对轨道的影响。
- 全用
px：例如grid-template-rows: 48px 1fr minmax(48px, auto) - 或全用
fr+ 绝对下限：minmax(48px, auto)中的48px是关键，不能写3rem -
gap改用clamp(8px, 2vw, 16px)，vw比rem在缩放下更稳定 - 文字容器内用
font-size: clamp(14px, 1.1rem, 16px)自适应，但 Grid 结构保持不动
fixed 定位在缩放下本质不可靠，sticky 更稳
缩放后 position: fixed 元素视觉偏移、点击错位，不是你没写对 top/bottom，而是它的锚定坐标系（逻辑视口）和渲染像素之间出现了映射偏差。尤其 iOS 上，双击放大或系统字体调大后，fixed 元素会钉在旧坐标不动，内容却已重排。
硬加 user-scalable=no 解决不了，它只拦手势，拦不住系统级缩放。真正可行的是换定位策略。
- 顶部导航栏、底部操作栏优先用
position: sticky，它随文档流滚动，不受缩放影响 - 必须用
fixed时（如弹窗遮罩），监听visualViewport动态修正：el.style.top = visualViewport.offsetTop + 'px' - 检查祖先元素是否含
transform、filter或will-change，它们会让fixed退化为relative
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
