Appleの新しいデバイスに対応するCSSメディアクエリは何ですか? Xのセーフエリアの背景色を変更するには、body
のbackground-color
を設定する必要があります。
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
@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)
参考文献:
これは、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) { }
私はここの答えが使用していることに気づいた: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
を実行します。これはこの主題に関する少数の有用なリンクです:
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);
これを説明するリンクがあります。