웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법

웹 페이지를 모바일 기기에서 세로 모드가 아닌 가로 모드에 보도록 만드는 경우가 있습니다. 예를 들어, 유튜브 영상 등을 웹 페이지에 삽입하는 경우, 사용자의 모바일 기기가 세로 모드로 설정되어도 가로 모드로 표시되기를 원할 수 있습니다.

웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법

웹 페이지가 모바일 장치에서 가로 모드로 강제로 표시되도록 해야 하는 경우가 있을 수 있습니다. 

HTML5 webapp manifest 사용

웹앱(webapp)에서는 HTML5 webapp manifest를 사용하여 가능합니다.

html5rocks.com에 설명되어 있듯이 manifest.json 파일을 사용하여 기기 방향 모드를 강제로 설정할 수 있습니다. 

json 파일에 다음 라인을 추가하도록 합니다:

{
    "display":      "standalone", /* "fullscreen", "standalone", "minimal-ui", "browser" 중 하나가 될 수 있음 */
    "orientation":  "landscape", /* "landscape" 또는 "portrait" 중 하나가 될 수 있음 */
    ...
}

다음과 같이 html 파일에 manifest를 추가할 수 있습니다. 

<link rel="manifest" href="manifest.json">

CSS 미디어 쿼리

웹앱이 아닌 경우 아래의 CSS 미디어 쿼리를 사용하여 기기 방향을 감지할 수 있습니다. 

@media screen and (orientation:portrait) {
    // 기기가 세로(Portrait) 모드일 때 적용되는 CSS
}

@media screen and (orientation:landscape) {
    // 기기가 가로(Landscape) 모드일 때 적용되는 CSS
}

Stackoverflow 문서 "How to fit iframe content with landscape orientation within device screen(기기 화면 내에서 iframe 콘텐츠를 가로 방향에 맞추는 방법)"에서는 다음과 같은 CSS 코드를 제시하고 있습니다.

body {
  display: block;
  width: 100vh;
  height: 100vw;
  transform: translateY(100vh) rotate(-90deg);
  transform-origin: top left;
}

크기가 회전하기 전에 계산된다는 것이 문제입니다. 이러한 문제에 대응하기 위해 vh, vwh 크기를 사용하여 높이에는 vw, 너비(폭)에는 vh를 사용할 사용할 수 있습니다. 그런 다음 회전시켜서 viewport로 변환시킬 수 있습니다.

다른 Stackoverflow 문서에서는 다음과 같은 코드가 제시되고 있습니다.

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

이와 관련하여 다양한 글을 구글에서 검색하여 참조할 수 있습니다.

참고

https://avada.tistory.com/2770

[자바스크립트] 마우스 우클릭 금지 방법

https://avada.tistory.com/2789

워드프레스 Divi 테마용 무료 웹 개발자 레이아웃 팩(Web Developer Layout Pack) 다운로드