86

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

4

4 に答える 4

119

@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 などを使用することをお勧めします。これは本当に素晴らしいことです。これが純粋な Web ではないことはわかっていますが、モバイルでの純粋な Web エクスペリエンスは失敗に終わりました。

于 2012-01-05T05:45:58.147 に答える
47

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

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

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}
于 2012-01-05T05:32:20.193 に答える