Akik A man who aspires to be a bull

Writing in the front

It’s been almost three years since the iphonex was released in September 2017 (so I won’t dwell on the sensor housing and Home Indicator here), I believe there are still some students who are worried about how the iphonex series models can be perfectly adapted. The author made a summary based on the company’s mobile terminal h5 project and some official documents, hoping to help you.

Preliminary knowledge

Security zones, viewport-fit, env(), and constant() are three things we need to know before we start masturbating

The safety area

I think you can understand the expression “safe area”. As the name suggests, as shown below, the safe zone is the area that is not affected by the bangs on the head and the small black bar at the bottom. Apple interactive guide

viewport-fit

Viewport-fit is a new feature in IOS 11. Enumeration values of viewport-fit are described as follows:

  • Contain: a visual window that contains everything on the web
  • Cover: The content of the web page completely covers the visible window (right)
  • Auto: indicates the default value, which is the same as the contain


More on viewPort-fit

Env () and constant ()

All iPhone X’s are irregular shapes. We need to keep the content of our page within the security zone mentioned above. How do we leave the top and bottom of the page empty? Apple has been kind enough to expose the location of safe zones to developers in the form of CSS constants that are wrapped around env() and constant(). See this issue for details

Constant value of security zone location information

  • Safe-area-inset-top: Indicates the number of security zones (in CSS pixels) to be inserted from the top of the viewport.
  • Safe-area-inset-bottom: The number of safe area inserts (in CSS pixels) starting from the bottom of the viewport.
  • Safe-area-inset-left: indicates the number of security zone inserts (in CSS pixels) starting from the left of the viewport.
  • Safe-area-inset-right: indicates the number of security zone inserts (in CSS pixels) starting from the right of the viewport.

Env () and constant() are introduced

Env () and constant() are new features in IOS 11. They are two CSS functions.

In IOS 11.0-11.2, the constant function was supported, and in IOS 11.3, the constant function was deprecated in favor of env.

A simple example

Clear the bottom safe distance

padding-bottom: constant(safe-area-inset-bottom); // compatible with 11.0 < iOS < 11.2 PADDING-bottom: env(safe-area-inset-bottom); // Compatible with iOS >= 11.2Copy the code

Pay attention to the point

  • You need to set viewport-fit=cover to obtain the security zone location information.
  • The constant and env functions need to be included to ensure compatibility with all IOS 11 operating systems.

summary

It should be noted that the preconditions for using security zone location information are to set viewport-fit=cover. Then, the information mentioned above belongs to the new content of IOS 11. The factory system of iphoneX is greater than or equal to 11.0, so it can be safely and boldly used for the compatibility of iphoneX.

Correct posture

After watching the front, we have some strange knowledge, next to officially enter the adaptation of iphonex series models link. Of course, after watching the following we will use the most perfect and concise posture to adapt, do not blink, go~

precondition

Set the viewport – fit = cover

<meta name="viewport" content="width=device-width,viewport-fit=cover">
Copy the code

Iphonex Series models need to be adapted “container”

Our MOBILE TERMINAL H5 page is generally opened in four “containers” : wechat, web, App and small program. So we need to adapt our page to these four containers so that we can dance like a concubine on the iphonex.

Adaptation in wechat, small programs and web pages

The head

In these containers, the head is already adapted by the container, so we only need to focus on the bottom.

At the bottom of the

Posture: leave a safe distance at the bottom of the whole page (different project layout methods are different, depending on the situation to decide which place is more reasonable (page, basicPage)) :

body {
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
Copy the code

Fit in the App

The head

Head compatibility We need to start in the navigation head component of our own project, the idea is to add a safe distance at the top of the navigation head, to avoid the navigation head into the bangs inside.

  • Add a specific class name for ios and app environments, such as ipx-head-nav
  • Add a padding-top value to ipx-head-nav to leave the top safe distance empty
.ipx-head-nav { padding-top: 20px; Padding-top: constant(safe-area-inset-top); padding-top: constant(safe-area-inset-top) padding-top: env(safe-area-inset-top); }Copy the code

The padding-top is 20px, and the constant and env functions are compatible with iphonex and IOS 11 models.

At the bottom of the

And in wechat, small programs, the bottom of the web page adaptation posture consistent, unified posture.

Processing of some special scenarios

Bottom (bottom === 0) button

It is suggested to change the bottom suction buttons to fixed positioning, and then use this posture to adapt:

.btn { position: fixed; bottom: 0; // This will work if both the constant and env functions are not supported. bottom: env(safe-area-inset-bottom); &:after { content: ' '; position: fixed; left: 0; right: 0; bottom: 0; background-color: #ffffff; height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); }}Copy the code

Because on the iphonex, the bottom of the button is the safe distance at the bottom, there is a hollow space between that and the bottom of the button, so this gap needs to be filled.

Ideas:

  1. Button bottom value is first adapted to iphoneX;
  2. Add a new element to the empty position. The height is the height of the safe distance.

Fixed positioning of the incomplete suction (bottom! == 0) elements such as the “Back to top” button

Here we assume that we have a requirement, a “back to the top” button that needs to be 30px from the bottom and fit on the iphonex, so we can use the following pose:

.back-top-btn {
  bottom: 30px;
  bottom: calc(30px + constant(safe-area-inset-bottom));
  bottom: calc(30px + env(safe-area-inset-bottom));
}
Copy the code

On systems that do not support the constant and env functions, the bottom calculation is invalid, and bottom: 30px is in effect.

Small welfare

If you’re working on a project that uses SCSS to write a style, here are 3 awesome poses to help you understand how to use. If you don’t, you can leave a question in the comments section:

// iphonex-padding-bottom @mixin iphonex-padding-bottom($paddingBottom: 0px) {padding-bottom: $paddingBottom; padding-bottom: calc(#{$paddingBottom} + constant(safe-area-inset-bottom)); padding-bottom: calc(#{$paddingBottom} + env(safe-area-inset-bottom)); } @mixin iphonex-fixed-bottom($bottom:0px) {bottom: $bottom; bottom: calc(#{$bottom} + constant(safe-area-inset-bottom)); bottom: calc(#{$bottom} + env(safe-area-inset-bottom)); } @mixin iphonex-fixed-bottom-zero($backgroundColor: #ffffff) { @include iphonex-fixed-bottom(); &:after { content: ' '; position: fixed; left: 0; right: 0; bottom: 0; background-color: $backgroundColor; height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); }}Copy the code

Write in the last

The posture shared above is a general solution summarized by the author, but the solution is not the only one, just hope to provide you with a solution to make your application more perfect. Thank you for reading