救救孩子！
ua 判断机型？

没必要判断吧，网页的话，浏览器自己就适配了，网页封装的 APP 的话，你用啥封装就用它提供的方式修改就行啊，如果它没提供，你就找个提供的平台就行了！
如果非要自己判断，只能一个一个判断机型了，明显很坑啊，你也可以不管三七二十一，直接 padding-top 了。

不需要 JS 判断啊，直接 CSS env 获取 safe-area 的边界。非要 JS 获取那你就 CSS 写 safe-area 的几个值到 root 节点上
然后 js 里 getComputedStyle / computedStyleMap 就能拿到这几个环境变量。
https://developer.mozilla.org/en-US/docs/Web/CSS/env()

肯定是要 ua 判断。 机型太多有点坑

hybird 开发。产品需求 js 判断有无刘海 调用端上提供不同的能力。不是样式适配。。。

感觉可行 我试下这个方法。