[解決済み] CSSメディアクエリを使用してデバイスの向きを検出するには?
2022-04-20 06:58:49
質問
JavaScriptでは、以下の方法でオリエンテーションモードを検出することができます。
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
しかし、CSSだけで向きを検出する方法はないのでしょうか?
例:こんな感じ。
@media only screen and (width > height) { ... }
解決方法は?
画面の向きを検出するCSS。
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
メディアクエリのCSS定義は、以下の通りです。 http://www.w3.org/TR/css3-mediaqueries/#orientation
関連
-
Google Chrome用Webフロントエンド runtime.lastErrorのチェックが外れています。接続を確立できませんでした。受信側が存在しない
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] クエリ文字列の最大長を教えてください。
-
[解決済み] CSS メディアクエリ: max-width OR max-height
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Google Chrome用Webフロントエンド runtime.lastErrorのチェックが外れています。接続を確立できませんでした。受信側が存在しない
-
Chrome 91でSameSite by defaultのクッキーが削除された後の解決策、クッキーを持ち運べないChromeのクロスドメインPOSTリクエストの解決策
-
新バージョンのクロームでカメラとマイクをhttpプロトコルで呼び出せない問題を解決しました。
-
[解決済み] クエリ文字列の最大長を教えてください。
-
[解決済み] HTTPのContent-Dispositionヘッダーのファイル名パラメータをエンコードする方法は?
-
[解決済み] CSSメディアクエリを使用してデバイスの向きを検出するには?