運用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){ 

}