移动端用 display: none 隐藏元素是可行但需谨慎：它仅视觉隐藏，元素仍在 dom 中，影响事件、无障碍和 seo；适合纯装饰性内容，不适用于表单字段或关键导航。
移动端用 display: none 隐藏元素是否安全？
直接写 display: none 在媒体查询里是可行的，但要注意：它只是视觉隐藏，元素仍存在于 DOM 中，会继续触发 JavaScript 事件、占用无障碍（a11y）焦点流、影响 SEO（尤其服务端渲染时）。如果该元素纯属“为桌面设计的装饰/导航”，且无交互、无语义需求，display: none 是最轻量的选择。
- 适合场景：隐藏侧边栏、大图 Banner、非核心操作按钮
- 不推荐场景：隐藏表单必填字段、跳过关键导航链接、掩盖错误提示
- 注意：某些安卓 webview 或旧版 ios safari 对
display: none后的focus()行为有异常，测试时务必真机验证
为什么不能只靠 @media (max-width: 768px)？
单纯按像素宽度写断点容易失效。iphone SE（3rd）屏幕宽 375px，但 DPR=3，css 像素仍是 375；而部分安卓折叠屏展开后 CSS 宽度可能达 800px+，却处于手持移动场景。更稳妥的方式是结合 pointer 和 hover 特性判断设备能力：
- 优先用
@media (max-width: 768px) and (pointer: coarse)—— 粗粒度触控即大概率是手机 - 避免仅依赖
max-device-width（已废弃，多数浏览器忽略） - 若项目需支持横屏平板，可加
and (orientation: portrait)进一步收窄条件
visibility: hidden 和 display: none 在媒体查询中怎么选？
两者在响应式隐藏中效果不同：visibility: hidden 保留布局空间，display: none 完全脱离文档流。移动端屏幕紧凑，留白往往比隐藏更伤体验。
- 用
display: none：隐藏整个模块（如桌面版多列网格中的右栏） - 慎用
visibility: hidden：除非你明确需要占位（例如动画过渡中临时隐藏但保持布局稳定） - 性能提醒：频繁切换
display会触发重排（reflow），而visibility只触发重绘（repaint），但移动端重排开销通常可接受
隐藏后还要注意什么？
隐藏不是终点。DOM 节点还在，js 仍可能读取其 offsetHeight、绑定事件，甚至被屏幕阅读器朗读。真正干净的做法要配合其他控制：
立即学习“前端免费学习笔记（深入）”；
- 加上
aria-hidden="true"（对纯装饰元素）或移除tabindex（对交互元素） - 在 JS 中检查
getComputedStyle(el).display === 'none'而非仅靠 class 名判断显隐状态 - 如果隐藏的是图片或 iframe，记得加
loading="lazy"并确保它们不会在隐藏状态下仍发起网络请求（现代浏览器基本已优化，但低版本需验证）
最常被忽略的一点：隐藏了父容器，但子元素用了 position: fixed 或 absolute，可能意外跑出视口外还触发滚动条——得单独重置它们的定位上下文或 visibility。