web-dev-qa-db-ja.com

iPhone XR / XS / XS Max CSSメディアクエリ

Appleの2018デバイスを対象とする正しいCSSメディアクエリは何ですか：iPhone XR/XS/XS Max？

cssiphonemedia-queries
22
nathan

iPhone XR

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { }

iPhone XS

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone XS Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }


特定の向きをお探しですか？

ポートレート

次のルールを追加します。

    and (orientation : portrait)

ランドスケープ

次のルールを追加します。

    and (orientation : landscape)



参照：

43
nathan

上記は正しいですが、設計者はスケーリングやトリミングなどを避けるために、実際の画面サイズをターゲットにする必要があります。たとえば、XRのデフォルトの横画面サイズは実際には808pxです。

したがって、これはより適切かもしれません：@media（max-width：808px）{...
これは実際にこのクエリをオーバーライドします。@ media（max-width：896px）{...

問題は、Appleのセーフエリアインセットです。これらを克服し、以下を追加することにより、真の896pxの端から端までの幅を取得できます。

メタタグ：viewport-fit = cover CSS：body {padding：env（safe-area-inset、0px）; }

0pxサイズのパディングを変更したり、左上、右上、下の変数を追加したり、ポートレート/ランドスケープに合わせたりすることができます。ただし、ほとんどの場合、すでに十分なパディングが設計に含まれています。

リファレンス： https://webkit.org/blog/7929/designing-websites-for-iphone-x/

他のデバイスではテストされていませんが、すべて同じデバイスを採用しているようです。

2
darren

ネイサンからの情報は素晴らしいです。すべてのブラウザのインス​​ペクターが持っていないように見えるブレークポイントをありがとう。私が遭遇した唯一の課題は、以前のメディアクエリのすべてが次のようなものを使用することでした

/* Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {

一方、上記のソリューションでは

and (device-width : 414px)

これにより、min-deviceとmax-deviceの両方を使用しているクエリで問題が発生する可能性があります。

これらのサイズとDPRに感謝します！

0
Dick Kirkland