브라우저별 Full Screen

const element = useRef();
const triggerFull = () => {
    if (element.current.requestFullscreen)  element.current.requestFullscreen();
  };
  const exitFull = () => {
    if (document.exitFullscreen)  document.exitFullscreen();
  };

  어떤 요소를 FullScreen으로 보여주기 위해선 위와 같이 requestFullscreen(), exitFullscreen() 함수를 사용하는 것이 기본이다. 그러나 브라우저 별로 메소드를 지원하지 않는 경우가 있기 때문에 브라우저에 맞는 메소드를 호출하도록 구현해주어야 한다.

 

const triggerFull = () => {
    if (element.current) {
      if (element.current.requestFullscreen) element.current.requestFullscreen();
      else if (element.current.mozRequestFullScreen) element.current.mozRequestFullScreen();
      else if (element.current.webkitRequestFullscreen) element.current.webkitRequestFullScreen();
      else if (element.current.msRequestFullscreen) element.current.msRequestFullscreen();
    }
  };
  
  const exitFull = () => {
    if (document.exitFullscreen) document.exitFullscreen();
    else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); //chrome & safari
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); // firefox
    else if (document.msExitFullscreen) document.msExitFullscreen(); // IE
  };

• Android : -webkit-
• Chrome : -webkit-
• Firefox : -moz-
• Internet Explorer : -ms-
• iOS : -webkit-
• 오페라 : -o-
• 사파리 : -webkit -

  참고로 웹에서 각 브라우저는 위와 같은 접두어를 사용하고 있다.