크롬 전체화면

크롬은 전체화면을 막고있다. 전체화면하려해도 수초 안에 다시 돌아온다.

하지만, 360영상을 카드보드로 보려할때 핸드폰에서 전체화면이 안되면 상당히 거슬린다.

1. 시행착오

뭔가 스크립트로 전체화면을 유지하려 시도했는데 제대로 되지 않았다. 그렇다고 크롬을 쓰지말라고 할 수도 없고..

거기다 pc와 안드, ios 크롬어플에서도 다 되어야하기 때문에 더 골치가 아팟다.

그런데 순간, f11누르는거랑 같은 기능을 하면 되는거 아닌가?!?!?!?!?!

2. 직접 해보자

// 엔터 누를경우 f11누른것과 같은 이벤트를 발생시킨다.
document.addEventListener("keydown", function(e) {
      if (e.keyCode == 13) {
        toggleFullScreen();
      }
    }, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

위 소스는 엔터인데 나는 전체화면 버튼을 만들어서 그 버튼과 연결시켰다.

윈도우 크롬79버전에서 잘된다. 안드로이드 크롬79버전에서도 잘 된다. ios는 전체화면 버튼 자체가 안보인다. 아이폰 크롬어플에서는 전체화면 기능을 아예 제공하지 않는 듯 하다.

 

좌 : 일반화면 우 : 전체화면

 

3. 개선사항

추후 360동영상 피드백 및 버그가 어느정도 잡히면 그 이후에 ios는 더 찾아봐야할 것 같다.

 

4. 2020년 9월 추가

크롬버전이 높아지면서 아예 전체화면이 다 막혔다. 꼼수로 위와같이 됐었는데 현재는 안된다.

크롬에선 전체화면 할 방법이 없고, 전체화면과 비슷하게 하려면 팝업을 띄우되, 화면크기 꽉차게 팝업을 띄우는 수 밖에 없다.

 

크롬에서 보안상의 이유와 사용자가 이벤트 하기 전에 행동이 발생하는 것 등등 제한이 빡쎄지고 있어서 어쩔수 없다. 다른 브라우저들도 크롬을 따라가기때문에 꾸준한 수정이 필요하다.