iPhone Xメディア

iPhone Xサイズ

5.8インチ

5.65 x 2.79 x 0.30インチ

iPhone X解像度

1125 x 2436

インチあたりPX~458ピクセル

スクリーンサイズ

Apple iPhone Xの画面は5.8インチで、実際のデバイスサイズの約82.9%です.Apple iPhone Xデバイスの物理サイズは5.65 x 2.79 x 0.30インチまたは(143.6 x 70.9 x 7.7 MM)です.単位表示順は「高x幅x厚」

スクリーン画素密度とCSS画素比

Pixelは、任意のディスプレイの最小単位/要素です.
1インチに適したピクセルの合計数は、「スクリーン密度」または「ピクセル密度」と呼ばれ、「1インチあたりのピクセル数」と測定されます.ピクセル深度の制限は、1インチあたりのピクセル数が異なる画面サイズに依存することを示します.1インチあたりのピクセル数がスクリーンサイズの制限を超えると、表示解像度は増加しますが、実際のデバイスの幅/高さはピクセル単位で変更されません.実際のデバイス画素は、デバイス非依存画素またはCSS画素比と呼ばれる.
Apple iPhone Xの密度は約458画素、実際の画素密度は約153であるため、3 xhdpiの表示画素密度を有する.

画面解像度とビューポート

デバイスに表示されるピクセルの合計を「スクリーン解像度」と呼びます.また、任意のデバイスの実際のピクセルの合計を[ビューポート](Viewport)と呼びます.
Apple iPhone Xの物理スクリーンサイズは5.8インチで、解像度は約1125 x 2436ピクセル、画素密度は約458 PPIです.Apple iPhone Xのビューポートサイズは375 x 812ピクセルで、ピクセル比は約3です.

CSSメディア照会

Apple iPhone Xメディア照会(モバイル機器のみ)

@media only screen and (min-width: 375px) and (max-width: 767px) { /* Your Styles... */ }

Apple iPhone X Min-Widthメディア照会

@media only screen and (min-width: 375px) { /* Your Styles... */ }

Apple iPhone X Min-Heightメディア照会

@media only screen and (min-height: 812px) { /* Your Styles... */ }

Apple iPhone X Landscapeメディア照会

@media only screen and (min-width: 812px) and (orientation: landscape) { /* Your Styles... */ }

Apple iPhone X Portraitメディア照会

@media only screen and (min-width: 375px) and (orientation: portrait) { /* Your Styles... */ }

Apple iPhone X Retinaメディア照会

@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 458dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}

網膜は実際にはデバイス画素比率に基づいている.デバイスの多くは2 xまたは3 xディスプレイを備えているため、一般的な網膜メディアクエリーを使用して、すべてのタイプのデバイスに高解像度のコンテンツを表示できます.Retina 2 xおよびRetina 3 xメディアクエリは、次のようになります.
Retina 2 xメディアクエリー

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    /* Retina styles here */
}

Retina 3 xメディアクエリー

@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 384dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}