search

geeeger / blog

https://loofp.com
1 stars 0 forks source link

iphone 带底部控制条机型检测 #21

Open geeeger opened 4 years ago

geeeger commented 4 years ago

根据下面两部文章及问答 https://blog.csdn.net/a18339063397/article/details/81482073 https://stackoverflow.com/questions/47226824/iphonex-and-notch-detection

针对 iphone 检测带缺口机型（带缺口的也带控制条），他们的屏幕长宽比都是0.426,则

let iPhone = /iPhone/.test(navigator.userAgent) && !window.MSStream
let aspect = window.screen.width / window.screen.height
if (iPhone && aspect.toFixed(3) === "0.462") {
    // I'm an iPhone X or 11...
}

另，在h5制作过程中，需要让h5四周保持安全的padding距离以防止无法点击,则使用如下变量

body {
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

https://webkit.org/blog/7929/designing-websites-for-iphone-x/ https://developer.mozilla.org/en-US/docs/Web/CSS/env