React搭配styled-components实现F11全屏隐藏Navbar失效如何解决

代码不生效是两个问题叠加导致的：

• CSS选择器语法错误：你写的& :fullscreen在&和伪类之间多了空格，等价于后代选择器，只会匹配NavbarContainer内部处于全屏状态的子元素，不会匹配NavbarContainer本身；同时规则块闭合花括号外多了冗余分号，属于无效语法。
• 伪类匹配范围认知偏差：:fullscreen伪类只对通过Fullscreen API（调用requestFullscreen()方法）进入全屏的DOM元素生效，按F11触发的是Chrome浏览器本身的窗口级全屏，这个状态下没有任何DOM元素会匹配:fullscreen伪类，哪怕修正选择器语法，按F11时样式也不会触发。

根据你的需求（覆盖F11触发的浏览器全屏场景），按以下两步修改：

1. 调整样式实现逻辑 #

不要直接依赖:fullscreen伪类控制显隐，改用状态类绑定的方式实现：

const NavbarContainer = styled.div`
  height: 30px;
  background-color: mediumseagreen;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  /* 匹配全屏状态类时隐藏导航栏 */
  &.is-fullscreen {
    display: none;
  }
`

如果你只需要处理通过API触发的DOM元素全屏，不需要兼容F11浏览器全屏，只要把原来的选择器空格去掉，写成&:fullscreen { display: none; }即可，不需要额外加JS逻辑。

2. 增加全屏状态监听 #

在React组件中同时监听两类全屏场景，动态切换状态类：

• 监听fullscreenchange事件，覆盖API触发的DOM全屏场景
• 监听resize事件，通过窗口高度和屏幕高度的比对，识别F11触发的浏览器级全屏
  示例代码：

import { useState, useEffect } from 'react'

const Navbar = () => {
  const [isFullscreen, setIsFullscreen] = useState(false)

  useEffect(() => {
    const checkFullscreenStatus = () => {
      // 判断是否为API触发的DOM元素全屏
      const isApiFullscreen = !!document.fullscreenElement
      // 判断是否为F11触发的浏览器窗口全屏：窗口高度与屏幕高度一致，且不存在DOM全屏元素
      const isF11Fullscreen = window.innerHeight === screen.height && !isApiFullscreen
      setIsFullscreen(isApiFullscreen || isF11Fullscreen)
    }

    // 绑定事件监听
    window.addEventListener('resize', checkFullscreenStatus)
    document.addEventListener('fullscreenchange', checkFullscreenStatus)
    // 组件初始化时先校验一次初始状态
    checkFullscreenStatus()

    return () => {
      // 组件卸载时移除监听
      window.removeEventListener('resize', checkFullscreenStatus)
      document.removeEventListener('fullscreenchange', checkFullscreenStatus)
    }
  }, [])

  return (
    <NavbarContainer className={isFullscreen ? 'is-fullscreen' : ''}>
      {/* 导航栏业务内容 */}
    </NavbarContainer>
  )
}

export default Navbar

MacOS系统下Chrome的F11全屏逻辑和Windows存在差异，可以在判断逻辑中补充window.outerHeight === screen.height的条件，避免窗口最大化状态被误判为全屏。

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