适配iphoneX影响了其他ios手机

Question

最近在做h5页面的iphoneX的适配 需要专门针对iphoneX做特殊处理
考虑到ios之后会用env()代替constant() 所以写了如下代码（主要是加高头部，同时替换背景图片）：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .aaa {
        padding-top: 44pt;
        background: url(***.jpg) no-repeat center top;
        background-size: contain;
    }
}

代码生效后确实解决了iphoneX头部的问题，但是在iphone6、7（ios版本分别为11.1和11.1.2）上头部都被加高了。

请教一下大神 如何正确区分是否是iphoneX？

Answer 1

媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px){
  // 你的样式
    }