如何针对Safari/iOS移除网站全屏按钮，需CSS还是Javascript实现？

优先使用JavaScript实现，纯CSS方案存在明显局限性，不建议单独使用。

纯CSS方案的问题 #

• 仅能通过设备特征查询（比如@supports (-webkit-touch-callout: none)）匹配iOS设备，无法精准区分「支持全屏API的浏览器版本」和「不支持的版本」，容易出现不该隐藏的时候隐藏、该隐藏的时候没隐藏的误判。
• 无法覆盖所有iOS端使用WebKit内核的第三方浏览器，这类浏览器同样受系统限制不支持全屏API，纯CSS很难精准匹配所有场景。

JavaScript实现方案（推荐） #

直接通过API能力检测实现，不需要依赖UA判断，准确率最高：

// 检测当前浏览器是否支持全屏API
const fullscreenSupported = document.fullscreenEnabled 
  || document.webkitFullscreenEnabled 
  || document.mozFullScreenEnabled 
  || document.msFullscreenEnabled;

if (!fullscreenSupported) {
  // 找到全屏按钮后移除，或者添加隐藏类
  const fullscreenBtn = document.querySelector('#fullscreen-btn');
  fullscreenBtn?.remove();
  // 可选隐藏方式：fullscreenBtn?.classList.add('d-none');
}

该方案的优势：

• 只和浏览器实际支持能力挂钩，不需要硬编码设备、浏览器类型，所有不支持全屏API的环境都会自动隐藏按钮，适配性最强。
• 不会影响其他支持全屏API的移动端浏览器正常显示按钮，比如安卓端Chrome、Firefox都能正常使用该功能。

内容的提问来源于stack exchange，提问作者Denver Dang