내 웹 사이트를 가로 모드로만 표시하고 싶습니다. 가능합니까? 사용자의 손에있는 장치의 방향은 중요하지 않지만 웹 사이트는 항상 가로 모드입니다. iPhone 응용 프로그램이 그렇게 작동하는 것을 보았지만 웹 사이트에서이 작업을 수행 할 수 있습니까?

@Golmaal이 정말 대답했습니다. 저는 좀 더 장황하게 말하고 있습니다.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

방향을 이동하는 사용자를 제어 할 수는 없지만 최소한 메시지를 보낼 수는 있습니다. 이 예제는 세로 모드 인 경우 래퍼를 숨기고 경고 메시지를 표시 한 다음 가로 모드에서 경고 메시지를 숨기고 세로를 표시합니다.

나는이 대답이 @Golmaal보다 낫다고 생각하지 않으며 단지 칭찬 일뿐입니다. 이 답변이 마음에 들면 @Golmaal에게 크레딧을 제공하십시오.

최신 정보

최근에 Cordova와 함께 작업 해 왔는데 기본 기능에 액세스 할 수있을 때 제어 할 수 있다는 것이 밝혀졌습니다.

또 다른 업데이트

그래서 Cordova를 출시 한 후에는 결국 정말 끔찍합니다. JavaScript를 원한다면 React Native와 같은 것을 사용하는 것이 좋습니다. 정말 놀랍고 순수한 웹은 아니지만 모바일에서의 순수한 웹 경험은 실패했습니다.

내가 여기서 답을 기다리는 동안 CSS를 통해 할 수 있는지 궁금합니다.

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

당신에게 더 적합 할 수 있습니다.

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

이것은 자동으로 균등 회전을 관리합니다.

메인 컨테이너의 너비를 가지고 놀아야했습니다.

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}