[JavaScript] iPad Safari 전체화면 활성화

먼저, 스크립트 내부에 전체화면을 활성화하고 비활성화하는 함수를 선언한다.

// 전체화면 활성화
function openFullScreen() {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) {
    /* Firefox */
    document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) {
    /* IE/Edge */
    document.documentElement.msRequestFullscreen();
  }
}

// 전체화면 비활성화
function closeFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    /* IE/Edge */
    document.msExitFullscreen();
  }
}

이렇게 스크립트 내에 openFullScreen 함수와 closeFullScreen 함수를 작성해준 다음,
onClick 메서드를 사용하여 함수를 호출할 수 있도록 코드를 작성하면 된다.

function Example() {
  return (
    <>
      <button className="full-screen-button" onClick={() => openFullScreen()}>
        OPEN
      </button>
      <button className="close-screen-button" onClick={() => closeFullScreen()}>
        CLOSE
      </button>
    </>
  );
}

export default Example;

OPEN 버튼을 클릭하면 전체화면이 활성화 되고,
CLOSE 버튼을 클릭하면 전체화면이 비활성화 된다.

모바일에서는 작동하지 않으며, 태블릿의 경우에도 Safari에 한하여 작동하였다.
Chrome은 전체화면이 아예 작동하지 않는다 :(

Mobile: Chrome (X), Safari (X)
Tablet: Chrome (X), Safari (O)

Codepen 의 코드를 참고하여 실제로 사용해보고 정리해보았다!