web-dev-qa-db-ja.com

CSSメディアクエリのアスペクト比とデバイスアスペクト比の違い

aspect-ratioとdevice-aspect-ratioの簡単な用語の違いは何ですか？

cssmedia-queries
27
poptag

aspect-ratio

出力デバイスの対象となる表示領域のアスペクト比について説明します。この値は、スラッシュ（ "/"）文字で区切られた2つの正の整数で構成されます。これは、垂直方向のピクセル数に対する水平方向のピクセル数を表します。

ソース 。

device-aspect-ratio

出力デバイスのアスペクト比について説明します。この値は、スラッシュ（ "/"）文字で区切られた2つの正の整数で構成されます。これは、垂直方向のピクセル数に対する水平方向のピクセル数を表します。

ソース 。

3
alex

アスペクト比に関してターゲットの表示領域と出力デバイスの違いについて混乱しているすべての人のために：

対象となる表示領域

ブラウザウィンドウまたはWebサイトが表示される領域のアスペクト比（特殊なケースとしては、たとえば埋め込みWebサイトがあります）

出力デバイス

画面の物理的なアスペクト比。例えば。スマートフォンまたはデスクトップディスプレイの

スマートフォンとタブレットは通常、アプリを全画面モードでのみ表示するため、aspect-ratioとdevice-aspect-ratioは同じです。デスクトップコンピューターでは、ユーザーがブラウザーウィンドウのサイズを変更できるため、アスペクト比が変化するため、これは必ずしも当てはまりません。

お役に立てば幸いです。

38
F Lekschas

アスペクト比はビューポート領域を測定します。 device-aspect-ratioは、デバイスの画面領域を測定します。

3
1236

モバイルでの機能の違いは、ソフトキーボードを表示してもアスペクト比は変更されますが、デバイスのアスペクト比は変更されないことです。

3
Roger Krueger

アスペクト比

ビューポートのアスペクト比またはデバイスのアスペクト比は、幅と高さの比率です。したがって、画面の幅が1,000ピクセルで高さが500ピクセルの場合、1,000は500の2倍であるため、device-aspect-ratioは2：1になります。画面の比率は大きく異なります同様の長方形のように。

一般的なモニターのアスペクト比は、16：9（1920×1080または1366×768ピクセルなど）または16:10（1280×800）です。 iPhone 3および4Sは3：2（480×320および960×640）で、iPhone 5は16：9（1136×640）です。 Android電話は通常4：3、3：2、16：10、または16：9です。

例：

@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }
0
zloctb