WEBページを強制的に横画面で見るように回転させる HTML CSSコード

こんにちは、PCサイトをスマホでも見れるように調整して作成しました。

ですが、横画面限定で見てもらわないと、見た瞬間離脱されそうです

なので、アクセスした瞬間からスマホを回転させないと見れない仕様にしたいと思います。

こういった場合、どういうコードを書けばよいのでしょうか？

詳しい方、よろしくお願いします。

質問者からの補足コメント

• 

  ちょっと非表示になるか試してみました
  
  //縦向きの場合
  @media screen and (orientation:portrait)
  {
  body {display : none ;}
  }
  
  iPhoneのフォルダに入れたからなのか、ならないようです。
  アップロードしたらなると思いますか？
  
  あと
  縦向のcssでは、このセレクタ以外のセレクタは全てdisplay:none;
  横向のcssでは、このセレクタのみdisplay:none;
  
  の部分ですが、
  このセレクタ以外のセレクタ
  このセレクタのみ
  
  ってどんな感じに書くのでしょうか？
  初めての感じなので教えて頂けませんか？

    補足日時：2023/03/14 10:01

No.7 ベストアンサー 回答者： fujillin 回答日時： 2023/03/14 22:04

No6です。

＞<h2 id="attention">横画面にしてね</h2>
＞が表示されないので、
う～～ん、他のCSSとの関係もあるので・・
ひとまず、位置指定等を外して、以下でも表示できませんか？

body #attention {
display: block !important;
border: solid red 2px;
border-width: 2px 0;
}

この回答へのお礼

失礼しました、とんだヘマでしたｗ

<h2 id="attention">横画面にしてね</h2>をbody内に書いてました。
お手数おかけしてすみません。

無事表示されました！

お礼日時：2023/03/14 22:17

No.6 回答者： fujillin 回答日時： 2023/03/14 17:34

こんにちは

よこからですが・・・

＞もう作っちゃったし～～
どのような構成で、どのようなCSSになっているのか不明なのでなんともですが、以下で大まかには実現できるのではないかと思います。
（方法としては、No2様が回答なさっている内容と同じです）


（1）HTMLに以下の1行を追加
<h2 id="attention">横画面にしてね</h2>

（2）CSSに以下を追加
#attention { display: none; }
@media screen and (orientation: portrait) {
body * { display: none !important; }
body #attention {
display: block !important;
position: absolute;
top: 50vh; left: 50vw;
transform: translate(-50%, -50%);
border: solid red 2px;
border-width: 2px 0;
}
}

※ 実際の構成やCSSの内容によっては、上記だけではうまく打ち消せない場合もあります。

この回答へのお礼

ありがとうございます。

良いですね！
縦画面の時は白紙で、横画面にすると表示されました。

ただ　<h2 id="attention">横画面にしてね</h2>
が表示されないので、他コードのh2が白なのでそれが原因かと思って
font-size : 30px !important ;
color : #000000 !important ;
を追加してみましたが、表示されず白紙のまま

h2がいたずらしてるのかと思って、<h3 id="attention">横画面にしてね</h3>

にしてみたのですが、表示されないんですよね・・・なんででしょ

お礼日時：2023/03/14 19:17

No.5 回答者： ssawatake 回答日時： 2023/03/14 16:43

No.4の補足

orientation: portraitは指定しても仕方ないので、次にしても同じです。

@media screen and (max-width: 480px) {
・・・・・}

この回答へのお礼

ありがとうございます。
ちょっと色々やってみます！

お礼日時：2023/03/14 18:55

No.4 回答者： ssawatake 回答日時： 2023/03/14 11:12

>>ならないようです。

@mediaのorientationは「viewport」の縦横がどっちが長いかであって、デバイスが縦か横かじゃないですよ。
ここ注意が要ります。
ブラウザの幅も条件に入れて下さい。

例えば
@media (orientation: portrait) and (max-width: 480px)
とか・・・

2個目の補足質問

例
htmlで <p class="a">【このサイトは横向き推奨です】<p>
を先頭に記述。

それ以外(下)は全体を<div class="b">・・・・・・</div>で囲う

縦用のcssで、.b{display:none;}を追加
横用のcssで、.a{display:none;}を追加

こんな具合です。

No.3 回答者： ssawatake 回答日時： 2023/03/13 14:02

>>縦画面で表示されたら、【このサイトは横向き推奨です】を表示させたいですね。

ならば、【このサイトは横向き推奨です】と言う文字を、htmlで書いて置いて、この文字にcssのセレクタを設定します。

縦向のcssでは、このセレクタ以外のセレクタは全てdisplay:none;
横向のcssでは、このセレクタのみdisplay:none;

No.2 回答者： ssawatake 回答日時： 2023/03/13 11:24

レスポンシブデザインと同じで、メディアクエリでブラウザを横幅が狭い場合には、それに対応するcssで、bodyにdisplay:none;を指定してしまえば、表示無しになります。

この回答へのお礼

ありがとうございます。

判定してその判定による結果を表示させるんですね。

縦画面で表示されたら、【このサイトは横向き推奨です】を表示させたいですね。

もう作っちゃったし、ちょっと考え直さないといけないのかなぁ・・・

お礼日時：2023/03/13 11:35

No.1 回答者： naktak 回答日時： 2023/03/13 10:05

メディアクエリでlandscapeを条件にすれば横向きのCSSとなります。

https://web.runland.co.jp/blog_cate2/post-3505

縦向きの時に情報量を調整すればいいかと思います。

わざわざ横向きでないと閲覧できないサイト、というのも面倒なので閲覧しないと思います。
縦向きの場合は、横向きを強制させるのではなく、縦向きでも問題ない情報量に調整する方がよいかと思います。

この回答へのお礼

ありがとうございます。

一般的には自由を奪うのは正解じゃありませんよね、解ります！

今回は縦向きだと不便な情報量を、横画面で一見で見れることに価値のある情報を扱うため横固定が必要になりました。

私が一般ユーザーなら横向きで見るからまとめて表示してよ、みたいな感じなんです^^

メディアクエリ、ありがとうございます。
試してみます！

お礼日時：2023/03/13 10:49