Safety distance from the top of uniapp (including app)

When customizing navigation, if the top distance is not processed, it will be pushed to the top of the screen, and the title may be blocked by the notch of the phone.

When I was working on small programs before, I always used getMenuButtonBoundingClientRect () to obtain the top distance of the capsule menu and other information to handle the top safety distance, but it cannot be used on apps and H5, but uniapp provides a more useful var(– window-bottom) (used in css)

padding-top:  var(--status-bar-height) ;//给组件加个上边距

/*或者写一个占位div，高度设为css变量
height: var(--status-bar-height);*/

You can encapsulate a custom navigation component so that you don't have to change it on every page.