iphone 13/13 Pro/13 Pro Max 媒体查询 —— iphone手机分辨率整理

常见手机分辨率

媒体查询计算方式

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);

}