web-dev-qa-db-ja.com

iPhone 6および6 Plusのレスポンシブブレークポイント

Appleのサイトによると：

IPhone 6は、1400：1のコントラスト比（標準）で326 ppiで1334 x 750ピクセルの解像度を持ちます。

IPhone 6以降の解像度は1920 p1080 x 1080ピクセルで、コントラスト比は1300：1（標準）です。

ただし、CSSメディアクエリのレスポンシブブレークポイントはそれぞれ何になりますか？ （ポートレートとランドスケープ）

さまざまなレスポンシブエミュレータを使用してRetinaスクリーンサイズをテストする方法を完全に理解していません。どんな助けでも大歓迎です。

ioscssresponsive-designmedia-queriesiphone-6
26
user3349250

Css device-widthサイズではなく、デバイスの物理ピクセルを参照しています。これによると Tweet 、2つのデバイス幅は次のようになります。

iPhone 6: 375px (2.0 DPR)
iPhone 6 Plus: 414px (2.6 DPR)

それを知って（そしてツイートが正しいと仮定して）、適切なmeta viewportタグを使用していると仮定すると、おおよそ次のようになります。

iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)

お役に立てれば！

編集：

IPhone 6 Plusの2.6 DPRに関しては、実際には3.0 DPRによって1.15で縮小され、2.6 DPRになります。詳細は http://www.paintcodeapp.com/news/iphone-6-screens-demystified で確認できます（リンクについては@mdcarterに感謝します！）

53
Jack
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    /* iPhone 6+ Portrait */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    /* iPhone 6 and iPhone 6+ portrait and landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    /* iPhone 6 and iPhone 6+ portrait */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 
    /* iPhone 6 and iPhone 6+ landscape */
}

すべての標準デバイスのメディアクエリのリストを取得できます here

18
qnimate