悬浮工具栏移动端不显示的主因是viewport meta缺失和safe-area-inset-bottom未适配；需添加viewport meta标签，使用max-width: 600px断点，fixed底部加bottom: env(safe-area-inset-bottom)，并用opacity/transform切换状态。
悬浮工具栏在移动端不显示？检查 @media 断点是否覆盖了真实设备宽度
很多实现失败，是因为用 max-width: 768px 做断点，但现代手机横屏时宽度可能超 800px，而竖屏下又因 viewport 缩放导致 CSS 像素和设备像素比错乱。实际应优先按视口宽度（viewport）响应，而非设备型号。
- 务必在
中加入<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端根本不会触发@media - 推荐断点用
max-width: 600px（覆盖绝大多数竖屏手机），而不是 768 或 992 —— 后者更适合平板横屏场景 - 避免用
min-device-width，它检测的是物理屏幕，不随旋转或缩放变化，已基本弃用
position: fixed 在 iOS Safari 底部工具栏上会“消失”？加 bottom: env(safe-area-inset-bottom)
iOS 11+ 的 Safari 有底部安全区（比如 iPhone X 及之后的圆角+Home Indicator），position: fixed; bottom: 0 会直接卡进不可见区域，看起来像被切掉了。
- 移动端固定到底部时，必须写成：
bottom: 0; bottom: env(safe-area-inset-bottom);（后者覆盖前者） -
env(safe-area-inset-bottom)是 CSS 环境变量，只在支持安全区的系统中生效，老浏览器自动忽略，无需 JS 判断 - 如果工具栏内容被遮挡，不要强行用
padding-bottom补，那会导致安卓或桌面端多出空白；应只对fixed容器本身加env()
从悬浮变横条时，图标间距和点击热区容易失效
桌面端靠右悬浮时常用 right: 20px + flex-direction: column，但转到底部横条后，若直接改 flex-direction: row，图标会挤在一起、没有外边距、手指点不准。
- 移动端必须重置
gap或margin：比如桌面用gap: 12px，移动端建议至少gap: 16px（符合 iOS/Android 最小触控尺寸 44×44px） - 图标容器要设
min-width: 44px; min-height: 44px，防止文字缩小时热区塌缩 - 别用
font-size控制图标大小——SVG 更稳；若用 icon font，确保line-height: 1和vertical-align: middle防止基线偏移
动画切换时出现闪动或布局抖动？避免在 @media 内直接改 display
常见写法是桌面用 display: flex 悬浮，移动端切 display: none 再 show 横条，结果切换瞬间白屏或跳动。
- 统一用
opacity+transform控制显隐，配合visibility: hidden做最终隐藏（避免占位但不可交互） - 两个状态都保持
display: flex，仅通过flex-direction、justify-content、top/right/bottom切换位置，浏览器能复用渲染树 - 加过渡：例如
transition: transform 0.25s ease, opacity 0.2s ease，但别给display加 transition —— 它不触发重绘，只会突变
最常被忽略的是 viewport meta 和 safe-area-inset-bottom 的组合效果：缺一不可。没加 meta，再准的断点也白搭；加了 meta 却没处理 safe area，iPhone 用户永远点不到最底下一个图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
