H5 adapts to Android bangs

H5 vue project how to adapt to some special bangs and bumps of Android, such as Huawei P20, etc., adapting to the iphoneX,iphone official website has proposed a solution, is there any Android?

Apr.24,2022

1. Judge whether the model has bangs according to navigator.userAgent . If so, then padding-top has a certain height, which can be written to death.
2. According to navigator.userAgent , determine whether the model is returned by hardware or whether it is the home key of the touch screen like iPhone X . If so, then padding-bottom has a certain height, which can be written to death.
3. Apart from the stupid method above, no other good solution has been found so far. Unless the browser does the job, but it's impossible.
4. You can organize this into a plug-in SDK , so you can publish to npm .


how did the landlord solve it? I did not find a solution. Thank you


whether you have found a solution.


judge whether the model has bangs according to navigator.userAgent, but there are thousands of models, and the adaptation is going to kill people


is there a solution

Menu