常見手機解析度

媒體查詢計算方式

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