常見手機分辨率
媒體查詢計算方式
console.log( "device-width:", window.screen.width, "device-height", window.screen.height, "-webkit-device-pixel-ratio", window.devicePixelRatio );
所以iphone無home鍵有safearea的高度
// iPhoneX/iPhoneXs/iPhone11 Pro
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 34px);
}
// iPhoneXs Max/iPhone11 Pro Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 34px);
}
// iPhoneXR/iPhone11
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
height: calc(100vh - 34px);
}
// 13 mini/12 mini
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 34px);
}
// 13 Pro/12 Pro
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 34px);
}
// 13 Pro Max/12 Pro Max
@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 34px);
}