web-dev-qa-db-ja.com

iPhone X / 8/8 Plus CSSメディアクエリ

Appleの新しいデバイスに対応するCSSメディアクエリは何ですか？ Xのセーフエリアの背景色を変更するには、bodyのbackground-colorを設定する必要があります。

cssmedia-queriesiphone-xiphone-8iphone-8-plus
54
nathan

iPhone X

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 8

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

iPhone 8 Plus

@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }


iPhone 6 +/6s +/7 +/8 +は同じサイズを共有していますが、iPhone 7/8も同様です。

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

ポートレート

以下のルールを追加してください。

    and (orientation : portrait)

風景

以下のルールを追加してください。

    and (orientation : landscape)



参考文献：

107
nathan

これは、iPhoneに関する以下のメディアクエリの一部です。これが参照リンクです https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

    /* iphone 3 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

    /* iphone 4 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 5 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6, 6s, 7, 8 */
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6+, 6s+, 7+, 8+ */
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone X */
    @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone XR */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

   /* iphone XS Max */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
50
Yash Vekaria

私はここの答えが使用していることに気づいた：device-width、device-height、min-device-width、min-device-height、max-device-width、max-device-height。

これらは廃止予定であるため使用しないでください。参考のために MDNを参照してください 。代わりに通常のmin-width、max-widthなどを使用してください。追加の保証として、最小値と最大値を同じpx量に設定できます。例えば：

iPhone X

@media only screen 
    and (width : 375px) 
    and (height : 635px)
    and (orientation : portrait)  
    and (-webkit-device-pixel-ratio : 3) { }

私は身長に635pxを使っていることに気づくかもしれません。自分で試してみてくださいウィンドウの高さは実際には635ピクセルです。 iPhone X用のiOSシミュレータを実行し、Safari Webインスペクタでwindow.innerHeightを実行します。これはこの主題に関する少数の有用なリンクです：

9
Sam Sedighian

Env（）を使用してiPhone X/8のパディングを追加する最も正確な（そしてシームレスな）方法は...

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

これを説明するリンクがあります。

https://css-tricks.com/the-notch-and-css/

0
Wasif Ibrahim