html 苹果xr媒体查询,运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

//iphoneX、iphoneXs

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

}

即: 设备屏幕可见宽度为375px， 可见高度为812px及设备像素比为3

//iphone Xs Max

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

}

//iphone XR

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {

}

//横屏

@media all and (orientation : landscape) {

}

//竖屏

@media all and (orientation : portrait){

}