最稳妥的方式是用媒体查询限制 position: fixed 仅在 max-width: 768px 下生效，pc 端回归文档流；避免 display: none，需兼顾安全区 env(safe-area-inset-bottom)、z-index 隔离及可访问性。
用媒体查询控制 position: fixed 的生效范围
直接在 PC 端隐藏底部悬浮条，最稳妥的方式不是靠 JS 判断设备，而是用 CSS 媒体查询限制样式作用域。关键点在于：只让 position: fixed、bottom: 0 等定位规则在小屏幕下生效，大屏下让它回归文档流或完全隐藏。
常见错误是写成 display: none 或 visibility: hidden —— 这会导致元素仍占 DOM 位置，且动画、焦点、可访问性都可能出问题。
- 推荐写法：在默认样式中不设
position: fixed，只在媒体查询内启用 - 断点建议用
max-width: 768px（覆盖主流手机和平板竖屏），避免用max-device-width（已被多数浏览器弃用） - 如果悬浮条有动画（如滑入），确保动画类名也只在媒体查询内定义或触发，否则 PC 端可能残留
transform或opacity值
@media (max-width: 768px) {
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom);
}
}
为什么不能只靠 display: none 隐藏 PC 端悬浮条
单纯在 PC 端加 display: none 看似简单，但会带来三个实际问题：
- 移动端加载时若 JS 尚未执行，
display: none可能被 PC 样式覆盖，导致首屏闪一下再消失 - 如果悬浮条里有
<input>或需要键盘交互的控件，PC 端虽不可见，但tab键仍能聚焦进去，破坏可访问性 - 某些 SSR 框架（如 Next.js）在服务端渲染时无法识别
display: none是否应生效，容易导致水合 mismatch
更干净的做法是：PC 端让它保持静态布局（比如作为普通 footer 插入文档流），而不是“藏起来”。这样语义清晰、无障碍友好、也不依赖 JS。
结合 env(safe-area-inset-bottom) 处理 iPhone 底部安全区
只在手机端显示还不够——iPhone X 及后续机型有圆角和 Home Indicator，底部悬浮条必须避开物理不可操作区域。这时候光靠媒体查询不够，得叠加安全区适配。
-
env(safe-area-inset-bottom)是原生支持的安全区变量，在 iOS Safari 和 Chrome for iOS 中可用 - 不要单独用它当高度值（如
height: env(safe-area-inset-bottom)），而应叠加在padding-bottom上，确保内容不被遮挡 - 为兼容不支持
env()的旧浏览器，需提供 fallback：用@supports包裹，或直接设一个合理默认值（如56px）
@media (max-width: 768px) {
.bottom-bar {
padding-bottom: max(56px, env(safe-area-inset-bottom));
}
}
注意 z-index 在多设备下的层级冲突
移动端固定悬浮条常设 z-index: 999 来压住内容，但这在 PC 端若意外生效，可能盖住弹窗、下拉菜单甚至全屏视频控件。
- 不要把
z-index写在全局样式里，必须和position: fixed一起放在媒体查询内 - 避免用超大值（如
999999），PC 端即使没显示，CSS 层叠上下文也可能被意外创建 - 如果项目用了第三方 UI 库（如 Ant Design、Element Plus），它们的弹窗
z-index通常在 2000 左右，你的悬浮条设到 1000 就够了，留出余量
真正难处理的不是怎么让它只在手机显示，而是确保它在手机上不抢焦点、不挡键盘、不和系统 UI 冲突——这些细节一旦漏掉，用户第一反应不是“功能没做”，而是“这页面卡了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
