移动端全屏切换时字体大小异常问题求助
嘿，这个坑我之前踩过！这是Chrome移动端（包括DevTools模拟器）的一个默认优化行为在搞事——浏览器会在全屏模式下自动放大文本内容，而且这个缩放是浏览器层面的操作，不会体现在DevTools的计算样式里，所以你看到CSS都是16px，但实际显示的字体却变大了。
具体原因分析
Chrome为了提升触屏设备（对应你代码里的pointer: coarse场景）全屏内容的可读性，会自动对文本应用动态缩放，哪怕你的CSS明确设置了字体大小。这个行为没有修改元素的计算样式，只是在渲染层面做了放大，所以你在DevTools里查不到变化。另外，你的HTML里缺少关键的viewport meta标签，这会让移动端浏览器的视口计算混乱，进一步放大这个问题。
解决步骤
1. 添加viewport meta标签
在HTML的<head>里加上这个标签，确保页面适配设备宽度，避免浏览器默认的视口缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
（user-scalable=no可选，如果你不想让用户手动缩放页面的话）
2. 禁用浏览器自动文本缩放
在CSS的body或者目标元素上添加text-size-adjust属性（包含webkit前缀以兼容旧版本Chrome），强制浏览器保持文本大小为100%：
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
这个属性会阻止Chrome在全屏或其他场景下自动放大文本，确保你的CSS字体大小完全生效。
3. 验证效果
加上这两个设置后，再切换全屏模式，字体大小就会和非全屏时保持一致了。你可以在DevTools模拟器和真实移动端Chrome里测试，应该不会再出现字体突变的问题。
额外提示
你代码里的@media (pointer: coarse)给#a11y-controls设置了font-size:20px，这个是合理的触屏适配，但要确保这个样式在全屏模式下也能正常继承，不会被浏览器的自动缩放覆盖——上面的两个步骤已经能解决这个问题了。
内容的提问来源于stack exchange，提问作者mmaismma
