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


85

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


3
良い質問ですが、あなたは一種のチートをすることができますが、答えは「不可能」であるに違いありません:stackoverflow.com/a/4807047/615754
nnnnnn 2012年

あんまり。あなたはcss変換を使ってそれを偽造することができますが、それは醜いです、そして私はそれがアンドロイドで逆さまであるかどうかを知る方法がないと思います。これが以前にここで議論されたことはかなり確かです。
Dagg Nabbit 2012年

1
ウェブサイトに最小幅:320pxを強制することは可能ですか?そのため、画面サイズが低解像度の場合、ユーザーはスクロールしてサイト全体を表示する必要があります。または、240pxの幅を320pxのコンテンツにズームできますか?
coure2011 2012年

このリンクがあなたにとってどれほど役立つかはわかりませんが、最新の[2020年1月]機能は、W3C w3c.github.io/screen-orientation
Sarath

回答:


117

@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が必要な場合は、ReactNativeのようなものを使用することをお勧めします。それは本当に驚くべきことであり、純粋なWebではないことはわかっていますが、モバイルでの純粋なWebエクスペリエンスは失敗しました。


私の日を作りました!これは、小さなデバイスでランドスケープモードを強制して、すばらしいメッセージを表示するのに非常に便利なスクリプトです。
dhruvpatel 2016年

あなたはクレジットのほとんどを手に入れました;)あなたのよく説明された答えと@Golmaalのために+ 1d ..
Hitesh Misro 2016年

本当に便利です、ありがとう!別のスタイルシートに貼り付けた場合、これは機能しないように見えることに注意してください。
うーん2018

あなたの答えはあなたが参照するものよりも優れています。あなたは実際の解決策を提供し、より創造的で問題のあるものではなく、簡単に実装できる警告を推奨します。他の「答え」はあなたにインスピレーションを与えたかもしれませんが、それは多かれ少なかれ声を出して疑問に思っていました。orientation条件付きグループプロパティの存在に言及するコメントとしてはもっと良かったでしょう。
ヴィンス

46

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

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

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

35

これを試してくださいそれはあなたにとってより適切かもしれません

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

これにより、回転も自動的に管理されます。


7
賢いですが、実際には機能しません。実際のブラウザではなくコンテンツのみが回転するため、ページを回転させるとページの多くにアクセスできなくなります。
グラハム

2
これはアニメーションを壊し、おそらくページのモバイル応答性を破壊するでしょう。
Wissam El-Kik 2014

2

メインコンテナの幅を試してみる必要がありました。

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

いいアイデア..ポートレート/風景を切り替えるときにアーティファクト/ノイズはありますか?
HKO
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.