[Angular] 모바일 브라우저 화면 고정하기 (Lock Screen orientation in mobile browser)

 

1차 시도

 

화면마다 세로로 고정 또는 가로로 고정이 되야 한다는 요구사항을 받고 iOS에선 거의 코드 한 줄만 추가하면 되기 때문에 금방 끝날거라고 생각했다.

 

바로 구글링 하니깐 MDN Web APIs 문서에 ScreenOrientation.lock()이라는 메서드가 검색되었다.

 

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

ScreenOrientation.lock() - Web APIs | MDN

 

위 API는 아래와 같이 window의 screen의 방향을 원하는 타입 portrait(세로) or landscape(가로)를 설정할 수 있었다.

 

(이것들 외에도 natural,portrait-primary 등 많은 lock type이 존재한다.)

 

 window.screen.orientation.lock('portrait').then(
      (success) => alert('success!'),
      (fail) => alert(`fail... ${fail}`)
    );

 

우선 웹 브라우저에서 실행시켜 보면 아래와 같은 이유로 lock이 실패한다.

 

 

문서를 읽어보면 화면 lock은 모바일 디바이스에서만 가능하다고 명시되어 있다.

 

 

그렇다면 모바일로 실행시키면 잘 작동되겠구나... 하고 실행시켜 보니.. 성공도 실패도 하지 않았다.

 

window.screen.orientation을 출력해보니 undefined로 나와 lock 메서드가 아예 실행이 안되는 것이었다.

 

아니 공식 문서에 나와있는대로 했는데 왜 안되는거지.. 라는 생각으로 메서드를 여러가지 방식으로 적용해 보았는데 결국 안됐다.

 

모바일 브라우저에서 한 번도 가로모드가 강제로 적용되는 경우를 본 적이 없어서 이게 가능한 기능인지 의심까지 들었다..

---

해결방법

 

모바일 브라우저에서 화면을 고정시키는 핵심은 바로 "풀스크린" 이었다.

 

해당 되는 브라우저를 풀스크린으로 만든 다음 위 메서드를 사용해야 했다.

 

아래와 같이 해당 되는 브라우저 마다 풀스크린을 요청하는 메서드를 실행하고 그 다음으로 screen.orientation.lock 을 실행시켜야 lock이 작동되었다.

 

 openFullscreen(type: OrientationLockType) {
    if (this.elem.documentElement.requestFullscreen) {
      this.elem.documentElement.requestFullscreen();
    } else if (this.elem.documentElement.mozRequestFullScreen) {
      /* Firefox */
      this.elem.documentElementmozRequestFullScreen();
    } else if (this.elem.documentElement.webkitRequestFullscreen) {
      /* Chrome, Safari and Opera */
      this.elem.webkitRequestFullscreen();
    } else if (this.elem.documentElement.msRequestFullscreen) {
      /* IE/Edge */
      this.elem.documentElement.msRequestFullscreen();
    }
    screen.orientation.lock(type);
  }

 

풀스크린을 끄는 방법은 아래와 같이 작성해주면 된다.

 

 closeFullscreen() {
    if (this.document.exitFullscreen) {
      this.document.exitFullscreen();
    } else if (this.document.mozCancelFullScreen) {
      /* Firefox */
      this.document.mozCancelFullScreen();
    } else if (this.document.webkitExitFullscreen) {
      /* Chrome, Safari and Opera */
      this.document.webkitExitFullscreen();
    } else if (this.document.msExitFullscreen) {
      /* IE/Edge */
      this.document.msExitFullscreen();
    }
  }

 

위에서 풀스크린을 제공하는 브라우저 외에도 화면을 고정해야 했는데 

 

1. Safari

 

먼저 사파리는 위와 같은 코드를 입력해도 풀스크린이 작동되지 않아 화면 고정을 할 수가 없었다.

 

구글링 해 찾아보니 사파리는 풀스크린도 안되고 screen.orientation.lock 메서드를 지원하지 않는다고 했다.

 

https://stackoverflow.com/questions/52504841/how-do-i-lock-the-screen-orientation-to-portrait-in-safari-using-plain-javascrip

 

 

우선 아래 코드로 어떤 브라우저인지 알아낸 다음 사파리라면 추가적인 코드를 작성해 줘야 했다.

 

브라우저 알아내기

 

  detectBrowswerName():string {
    let userAgent = navigator.userAgent;
    let browserName;

    if (userAgent.match(/chrome|chromium|crios/i)) {
      browserName = 'chrome';
    } else if (userAgent.match(/firefox|fxios/i)) {
      browserName = 'firefox';
    } else if (userAgent.match(/safari/i)) {
      browserName = 'safari';
    } else if (userAgent.match(/opr\//i)) {
      browserName = 'opera';
    } else if (userAgent.match(/edg/i)) {
      browserName = 'edge';
    } else {
      browserName = 'No browser detection';
    }
    alert(`${browserName}`)
    return browserName
  }

 

현재 디바이스 방향 알아내기

 

window에 addEventListner를 걸어 화면 방향이 바뀌는 것을 감지하고

 

  detectChangeOrientation() {
    window.addEventListener(
      'resize',() => this.readDeviceOrientation(),
      false
    );
  }

 

해당 디바이스 방향을 읽어낸다.

 

  readDeviceOrientation() {
    if (Math.abs(window.orientation) === 90 || Math.abs(window.orientation) === 270  ) {
      this.orientation = "Landscape"
    } else {
      this.orientation = "Portrait"
    }
  }

 

CSS

 

그 다음 CSS에 화면을 회전하는 코드를 작성해 상황에 맞게 화면을 돌려주었다.

 

@media only screen and (orientation: portrait) {
  body.portrait {
    height: 100vw;
    transform: rotate(90deg);
  }

  body.landscape {
    height: 100vw;
    transform: rotate(0deg);
  }
}

 

html 전체를 body로 감싼 다음 아래와 같이 작성해 주었다.

 

  @ViewChild('body') body: ElementRef | undefined;

  constructor(@Inject(DOCUMENT) private document: any) {}

if (matchMedia('only screen and (orientation: portrait)').matches) {
    if (type == 'landscape') {
      this.body?.nativeElement.classList.remove('landscape');
      this.body?.nativeElement.classList.add('portrait');
    } else {
      this.body?.nativeElement.classList.remove('portrait');
      this.body?.nativeElement.classList.add('landscape');
    }
  }

 

2. Zebra Enterprise

 

특정 기업에서는 알려진 브라우저 말고도 스캔하는 속도를 위해 Zebra Enterprise 브라우저를 사용하는 경우가 있었다.

 

해당 브라우저는 이미 화면이 락이 걸린 상태로 브라우저가 제공되어 CSS를 이용해 상황에 맞게 화면을 회전해 주면 됐다.

---

Reference

 

• https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock
• https://stackoverflow.com/questions/52504841/how-do-i-lock-the-screen-orientation-to-portrait-in-safari-using-plain-javascrip
• https://www.youtube.com/watch?v=GGmbLakR3E4
• https://codepedia.info/detect-browser-in-javascript