求判断刘海屏的解决方案 [JavaScript]

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1440 天前的主题，其中的信息可能已经有所发展或是发生改变。

救救孩子！

刘海屏

JavaScript

判断

方案

6 条回复 • 2020-12-15 13:01:24 +08:00

Fanx

2020-12-15 00:27:13 +08:00

ua 判断机型？

a570295535

2020-12-15 01:00:27 +08:00 via Android

没必要判断吧，网页的话，浏览器自己就适配了，网页封装的 APP 的话，你用啥封装就用它提供的方式修改就行啊，如果它没提供，你就找个提供的平台就行了！

如果非要自己判断，只能一个一个判断机型了，明显很坑啊，你也可以不管三七二十一，直接 padding-top 了。

chnwillliu

2020-12-15 06:52:21 +08:00

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

https://developer.mozilla.org/en-US/docs/Web/CSS/env()

limy97

2020-12-15 12:49:30 +08:00

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

limy97

2020-12-15 12:57:45 +08:00

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

limy97

2020-12-15 13:01:24 +08:00

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