Small program development uni-app obtains the bottom safe area to adapt to the black bar at the bottom of Apple and the pit of the IOS system

In the development of small programs, it is necessary to adapt to different models of Android and Apple. This article explains the pitfalls that have been stepped on when adapting to the Apple IOS system.

1. margin-bottom attribute

The bottom element of the page, such as the button in the picture, if you want to have a distance of 50rpx from the bottom, according to the conventional writing margin-bottom:50rpx;, the Android phone will display normally, and the Apple phone will not work, and the white/black bars that come with the system will block some of the buttons.
Solution:
a. For the situation that does not affect the element itself, it will be margin-bottomchanged padding-bottomto prop up the distance from the bottom (the button in the picture is not applicable, it will prop up the height of the button)
b. Add a parent element to the button element Set the height, or the added parent element is added padding-bottom.
insert image description here

2. The Apple mobile phone obtains a safe distance from the bottom

It is usually used env(safe-area-inset-bottom)to get the height of the bottom safe area, so as to adapt to iPhone X and above devices. However, on Android devices, env(safe-area-inset-bottom) the returned value is 0, so some other means needs to be used to fit the bottom safe area.
Compatible with iOS devices: constant(safe-area-inset-bottom)
Compatible with iPhone X and above devices: env(safe-area-inset-bottom)
can be written in the following order when used:

.container {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */
}

If you want to add another 50px to the height of the bottom safe area, you can write it in the following way:

  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 底部安全区域高度加 50px 的高度 */

3. The component is displayed in full screen

For example, if you click in the applet, a pop-up window will appear. The pop-up window needs a background mask for full-screen display. Setting the width and height of the mask to 100% will not take effect. You need to set the width and height to vw and vh, as shown in the following code:

.container {
  width:100vw;
  height:100vh;
}

insert image description here
If it is helpful to you, please remember to click triple link