강제 "가로"방향 모드


91

내 응용 프로그램이 "세로"모드 용으로 설계되지 않았기 때문에 응용 프로그램에 대해 "가로 모드"모드를 적용하려고합니다. 어떻게 할 수 있습니까?

답변:


93

이제 HTML5 웹앱 매니페스트로 가능합니다. 아래를 참조하십시오.


원래 답변 :

특정 방향으로 웹 사이트 또는 웹 응용 프로그램을 잠글 수 없습니다. 장치의 자연스러운 동작에 위배됩니다.

다음 과 같은 CSS3 미디어 쿼리를 사용하여 장치 방향을 감지 할 수 있습니다 .

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

또는 다음과 같이 JavaScript 방향 변경 이벤트를 바인딩합니다.

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

2014 년 11 월 12 일 업데이트 : 이제 HTML5 웹앱 매니페스트로 가능합니다.

html5rocks.com에 설명 된대로 이제 manifest.json파일을 사용하여 방향 모드를 강제 실행할 수 있습니다 .

이러한 줄을 json 파일에 포함해야합니다.

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

그리고 다음과 같이 html 파일에 매니페스트를 포함해야합니다.

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

잠금 방향 모드에 대한 웹 앱 매니페스트에 대한 지원이 정확히 무엇인지 확실하지 않지만 Chrome은 확실히 있습니다. 정보가 있으면 업데이트됩니다.


1
예, 웹앱도 있습니다. iPhone 또는 iPad의 홈 화면에 웹 사이트를 "저장"하더라도 웹앱은 방향을 변경합니다.
Rémi Breton

2
caniuse.com에 따라 Android 4.1부터 매니페스트를 사용할 수 있습니다. 참조 caniuse.com/#feat=offline-apps
레미 브르타뉴어

1
매니페스트가 호출되고 있는지 어떻게 알 수 있습니까? 그것은 나를 위해 작동하지 않으며 매니페스트가 링크 된 index.html과 동일한 위치에 있음에도 불구하고 내 개발 도구의 네트워크에로드되는 것으로 표시되지 않습니다.
Ian S

3
Chrome에서는 이제 검사 모드에서 "응용 프로그램"탭을 확인할 수 있습니다. json 파일에 대한 직접 링크와 이에 대한 정보가있는 "매니페스트"페이지가 있습니다.
drskullster

1
@ RémiBreton-아직도 그 정보를 찾고 계십니까? 우리는 몇 년 동안
ashleedawg 2019

46
screen.orientation.lock('landscape');

강제로 변경하여 가로 모드로 유지합니다. Nexus 5에서 테스트되었습니다.

http://www.w3.org/TR/screen-orientation/#examples


3
기본 인터넷 브라우저 (크롬 아님)를 사용하는 Android에서 작동하지 않습니다. 아이디어가 있습니까?
Antonios Tsimourtos

6
Safari (iOS 및 macOS) 용으로 구현되지 않음 : caniuse.com/#feat=screen-orientation
MBach

3
참고로, 전체 화면 모드로 들어간 후에 만 ​​작동합니다.
Thane Brimhall

2
이 방법은 Mozilla의 권장하지 않습니다 : developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation은 또한 그것은 매우 가난한 브라우저 호환성이
페르난도 가르시아

1
이것은 크롬의 전체 화면 모드에서도 작동하지 않습니다.
Shamshirsaz.Navid

22

나는 다음과 같은 CSS를 사용합니다 ( css 트릭을 기반으로 함 ).

@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;
  }
}

3
이 대답을 사용했습니다 .. 내가해야 할 일은 미디어 쿼리를에서 landscape로 변경 하는 portrait것이며 예상대로 작동합니다@media screen and (orientation: portrait)
ymz

미래의 사람들을 돕기 위해 답변을 편집했습니다. 현재 모드가로 portrait전환 될 수 있도록 회전을 적용해야합니다 landscape.
lfarroco

감사. 나는 이와 같은 것을 찾고 있었다.
underdog

page-id-xxx를 통해 단일 페이지에만 적용하려면 어떻게해야합니까?
호머

0

동일한 문제가 발생했습니다. manifest.json 파일이 누락되었습니다. 찾을 수없는 경우 파일을 지정하지 않거나 잘못된 경로를 사용하면 브라우저가 방향이 가장 적합하다고 결정합니다.

html 헤더에서 manifest.json을 올바르게 호출하는 문제를 수정했습니다.

내 HTML 헤더 :

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

그리고 manifest.json 파일 내용 :

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

파비콘과 아이콘을 생성하려면 다음 웹 도구를 사용하십시오 : https://realfavicongenerator.net/

매니페스트 파일을 생성하려면 다음을 사용하십시오. https://tomitm.github.io/appmanifest/를 하세요.

내 PWA는 훌륭하게 작동합니다. 도움이되기를 바랍니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.