web-dev-qa-db-ja.com

Webサイトを強制的にランドスケープモードでのみ表示する

Webサイトをランドスケープモードでのみ表示したいのですが、可能ですか？ユーザーの手にあるデバイスの向きは関係ありませんが、Webサイトは常に横長モードになります。 iPhoneアプリケーションがそのように動作するのを見てきましたが、これはWebサイトで実行できますか？

javascripthtml5mobile-browser
81
coure2011

@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などを使用することをお勧めします。それは本当に驚くべきことであり、純粋なウェブではないことを知っていますが、モバイルでの純粋なウェブ体験は失敗しました。

112
Jason Sebring

私自身はここで答えを待っていますが、CSSを介して行うことができるかどうか疑問に思います：

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

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

これを試してみてくださいあなたに適しているかもしれません

#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>

これにより、均等な回転が自動的に管理されます。

32
Mr. A

私はメインコンテナの幅で遊んでいた：

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