Recently write a small program, encountered iPhoneX bottom small black line and content overlap problem, in fact, iPhoneX security area adaptation problem, understand this problem took a lot of time, but also practical results, can not help but summarize.

This article directory

Description of overlap between content and small black line

1. Security zone meaning

2. Wechat applet adaptation of iPhoneX Home Indicator (1) Adaptation Plan 1: Use the known bottom black bar height 34px/68rpx to adapt (not recommended) (2) Adaptation Plan 2: Use wechat official API and safeArea object in getSystemInfo() for adaptation (recommended). (3) Adaptation scheme 3: Use apple CSS env() and constant() to match (recommended) 3.H5 to iPhoneX Home Indicator · use apple CSS env() and constant() to match (recommended)

preface

On Apple’s iPhoneX, iPhone XR and other devices, you can see that the physical Home button has been removed and replaced with a small black bar at the bottom. Wechat mini programs and H5 web pages need to be adapted to this situation, otherwise the bottom button or TAB bar may overlap with the black line at the bottom, as shown below.

1. What do you mean by safe zone?

To solve the problem of overlapping content with the little black line, we need to understand Apple’s definition of a safe zone.

The safety area

The safe area refers to a viewable window area. Content in the safe area is not affected by corners, sensor housing, and Home indicators.

Take a look at these two images from Apple. The blue zone in the middle is the safe zone. In other words, to fit the security zone is to have the contents of the applets or H5 displayed in the blue area.

At the same time, security zones are available after IOS11 and only for iPhoneX or later models. Therefore, adaptation is required for this type of models (for convenience, this type of models to be adapted is referred to as iPhoneX below), and adaptation is not required for older models.

2. Adapt the security zone on wechat mini program

Three options:

  • Use the known bottom black bar height 34px/68rpx to fit (not recommended)
  • Use wechat official API and safeArea object in getSystemInfo() for adaptation (recommended)
  • Use apple’s official CSS functions env(), constant() adaptation (recommended)

Option 1: Use the known bottom black bar height 34px/68rpx to fit (not recommended)

This is a relatively old method, compared with plan 2 and 3 is not recommended, you can understand, hurry can directly look at plan 2 and 3.

According to the online information, the Home Indicator at the bottom of the iPhone is 34px. In fact, I have confirmed that it is 34px on the real phone, so you can set the margin-bottom, padding-bottom, height of the bottom button or TAB according to this value. Or add a div to fill the position of the black bar.

To do this, determine whether the current model needs to be adapted to the security zone.

Question: How to determine whether the current model needs to be adapted to a security zone

Two schemes:

  • usewx.getSystemInfoSync()themodelAttribute judgment
  • usewx.getSystemInfoSync()In thescreenHeightandsafeAreaThe object’sbottomAttribute judgment

Method 1: Usewx.getSystemInfoSync()themodelAttribute judgment

Known apple devices with security zones on the market include the iPhone X, iPhone XR, iPhone XS Max, iPhone 11, iPhone 11 Pro, and iPhone 11 Pro Max, So you can get the Model property directly from the getSystemInfoSync() method. IPhone series wechat has not yet been adapted. The model return value of the phone is unknown(iPhone), which can also be adapted in advance.

let IPHONE_X = /iphone x/i
let IPHONE_X_11 = /iphone 11/i
let IPHONE_UNKNOWN = /unknown\(iphone\)/i

// method 1: use model to determine whether it is IPhoneX or other models with security zones
const isIPhoneX = (a)= > {
  let model = wx.getSystemInfoSync().model
  return (model.search(IPHONE_X) > - 1 || model.search(IPHONE_X_11) > - 1 ||
    model.search(IPHONE_UNKNOWN) > - 1)}// Regular expressions can also be used
const isIPhoneXRegex = (a)= > {
  let model = wx.getSystemInfoSync().model
  return (/iphone\sx/i.test(model)
    || (/iphone/i.test(model) && /unknown/.test(model))
    || /iphone\s11/i.test(model)) 
}
Copy the code

Method two: Usewx.getSystemInfoSync()In thescreenHeightandsafeAreaThe object’sbottomAttribute judgment

Here we use screenHeight instead of windowHeight because the windowHeight is calculated starting at the upper left corner of the screen, so we need screenHeight.

** Note: ** If using the emulator in wechat developer tools, screenHeight and bottom are always the same, you need to use a real machine to test.

Wx.getsysteminfosync () uses screenHeight and safeArea bottom
const isIPhoneX = (a)= > {
  let screenHeight = wx.getSystemInfoSync().screenHeight
  let bottom = wx.getSystemInfoSync().safeArea.bottom
  returnscreenHeight ! == bottom }Copy the code

Once you’ve solved the problem of how to tell if the device is an iPhoneX, you can write code.

<view class="bottom-button {{isIpX ? 'view-IPX' : ''}}">Button at the bottom of the</view>
Copy the code

Solution 2: Use wechat official API and safeArea object in getSystemInfo() for adaptation (recommended)

Use the safeArea object in wx.getSystemInfo () to get the height of the small black bar at the bottom

If it is an iPhone that needs to be adapted, use the “Bottom” section of safeArea to get the vertical coordinate of the bottom of the security zone. Then subtract screenHeight from “bottom” to get the height of the black bar. Save to localStorage, can be used globally.

Option 3: Use apple’s official adaptation scheme CSS functions env() and constant() to adapt (recommended)

Apple officially recommends using env() and constant() for adaptation, and recommends using this scheme regardless of the specific value. What are these two methods?

  • Env () and constant() are new features in IOS11. They are Webkit CSS functions that set the distance between a security zone and a boundary.
    • Safe-area-inset-left: indicates the distance between the security zone and the left boundary
    • Safe-area-inset-right: indicates the distance between the security zone and the right boundary
    • Safe-area-inset-top: indicates the distance between the security zone and the top boundary
    • Safe-area-inset-bottom: indicates the safe distance from the bottom boundary

Since the goal is to fit the little black bar at the bottom, only the safe-area-inset-bottom value is concerned.

Env () and constant() functions have a necessary premise to be used. They only take effect when the web page is set to viewport-fit=cover. According to the performance of wechat applet and my tests on real computer, the default viewport-fit in the applet is cover.

One thing to note is that before IOS11.2, you could use the constant() function, but since IOS11.2, this function has been deprecated and replaced by env(). The official quote is as follows:

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

So when we do screen adaptation, we need to write:

padding-bottom: constant(safe-area-inset-bottom); / * compatible with IOS < 11.2 * /
padding-bottom: env(safe-area-inset-bottom); / * compatible with IOS 11.2 * / >
Copy the code

** Note: **env() and constant() need to exist at the same time, and the order cannot be changed.

3. Adapt security zones on H5

It is much easier to adapt security zones on H5, using the viewport+env+constant scheme.

Viewport-fit has three default values:

  • Contain: a visual window that contains everything on the web
  • Cover: The content of the web page completely covers the visible window (right)
  • Auto: default value. This value does not affect the initial layout view port and the entire Web page is viewable.

Contain and cover include:

We need to set viewPort to Cover, env, and constant to take effect. The setting code is as follows:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the viewport - fit = cover">

Copy the code

Set env and constant at the same time. Env () and constant() need to exist in the same order.

/* Can be adjusted by adding padding-bottom to */
padding-bottom: constant(safe-area-inset-bottom); / * compatible with IOS < 11.2 * /
padding-bottom: env(safe-area-inset-bottom); / * compatible with IOS 11.2 * / >

/* Margin-bottom */
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

/* or change the height */
height: calc(55px +  constant(safe-area-inset-bottom));
height: calc(55px +  env(safe-area-inset-bottom));
Copy the code

You can also add a blank div color block at the bottom to fit.

Another option is to use the @Supports isolation compatibility style

Supports can be used to isolate compatible styles when browsers support either bottom: constant(safe-area-inset-bottom) or bottom: If env(safe-area-inset-bottom), the bottom-button class will add a margin-bottom style

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
	.bottom-button {
    	margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom); }}Copy the code

That’s my summary of how the small black bar at the bottom of the Safe Area of the iPhoneX fits into wechat mini programs and H5.

If it is helpful to you, thumbs up, comments and appreciation are all encouragement to me and motivation to support me to write, thank you!

Reference article:

  • Adapting the web to the iPhoneX is that simple
  • Apple’s official developer documentation explains screen adaptation
  • Wechat mini program bottom area ADAPTS to iPhone X
  • Wechat applet for iPhone X summary

This article was originally published in the wechat public number “Programmer Zhang Qingtian”, welcome to pay attention to the first time to get the latest share, together with progress.