HTML5 page adapts to iPhone x (that’s easy)

Time:2020-2-17

Preface

The iPhone x removed the physical button and changed it to a small black bar at the bottom, which led to an awkward screen adaptation problem on the web page. For web pages, the top (banged part) of the browser has been dealt with, so we only need to pay attention to the bottom and small black bar of the adaptation problem (that is, common bottom navigation, back to the top and other elements relative to the bottom fixed positioning).

The author reviewed some official documents, combined with some processing experience in the actual project, and sorted out a set of simple adaptation scheme to share with you, hoping to help you. The following are the renderings before and after processing:

As you all know, there is a Qi Liu Hai at the top of the iPhone x screen. The iPhone X has cancelled the physical button and changed it to a small black bar at the bottom. If it doesn’t fit, these places will be blocked. Therefore, this article describes the fitting method of Qi Liu Hai and the small black bar at the bottom.

Some new concepts

Safe area

Security area refers to a visual window range. The content in the security area is not affected by corners, sensor housing and home indicator, as shown in the following figure:

 

viewport-fit

What’s new in IOS 11 is that apple is trying to adapt the iPhone x to the existingviewport metaAn extension of the tag, which is used to set the layout of the web page in the visual window. It can be setThree values

value describe
auto The default value, which is consistent with the performance of contain. The content of the page is displayed in the safe area. Viewprot fit: Auto is equivalent to viewport fit: Contain
contain The visual window completely contains the content of the web page (left figure). The content of the page is displayed in the safe area.  viewport-fit:contain
cover The content of the web page completely covers the visible window (right). The content of the page fills the screen.  viewport-fit:cover

Constant function

A new feature of IOS 11, a CSS function of WebKit, is used to set the distance between the security area and the boundary. There are four predefined variables (unit: PX):


safe-area-inset-left
safe-area-inset-right
safe-area-inset-top
safe-area-inset-bottom

Note: by default, no extension is added to the web page. If you need to adapt to iPhone x, you must set viewport fit = cover, otherwiseconstantThe function does not work, which is a necessary condition for adaptation.

  • It is mentioned in the official document that env () will replace constant (), which is not available at present
  • Both of these functions are CSS functions in WebKit. Variable functions can be used directly. They are only supported in WebKit kernel
  • Constant: for IOS < 11.2
  • Env: for systems with IOS > = 11.2

Note: by default, no extension is added to the web pageviewport-fit=contain, need adaptationiPhoneMust setviewport-fit=cover, which is the key step of adaptation.

Adaptation example

Step 1: set the layout of the web page in the visual window


<meta name='viewport'  content="width=device-width, viewport-fit=cover"  />

Step 2: the main content of the page is limited to the safe area

body {
  /*Fit all the bangs*/
  padding-top: constant(safe-area-inset-top);  
 /*Fit bottom black bar*/
  padding-bottom: constant(safe-area-inset-bottom);
}

Step 3: adaptation of fixed elements

When bottom is not 0

/*When bottom is not 0*/
.fixed {
  Bottom: Calc (50px (original bottom value) + constant (safe area inset bottom));
}

Bottom suction (bottom = 0)

/*Method 1: set the inner margin extension height*/
/*In this scheme, the bottom strip must have a background color, because the extended part of the background follows the outer container, otherwise, there will be hollowing out. * /
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/*Direct extension height*/
.fix {
  Height: Calc (60px (original height) + constant (safe area inset bottom));
}

/*Method 2: fill the element with an empty div, but the background color should be consistent*/
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/*Style of bottom absorbing element*/
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}

Finally: use @ supports

Because only the models with all bangs and black bars at the bottom need to be adapted, you can use @ support together:


@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

Complete test code

@Supports isolation compatibility mode

Because only the models with all bangs and black bars at the bottom need to be adapted, you can use @ support together:

@mixin iphonex-css {
  Padding top: constant (safe area inset top); // the height of navigation bar + status bar is 88px
  Padding-top: env (safe-area-inset-top); // is the height of the navigation bar + status bar 88px
  Padding left: constant (safe area inset left); // 0 if there is no vertical screen
  Padding left: env (safe area inset left); // 0 if there is no vertical screen
  Padding right: constant (safe area inset right); // 0 if there is no vertical screen
  Padding right: env (safe area inset right); // 0 if there is no vertical screen
  Padding bottom: constant (safe area inset bottom); // is the height of the bottom arc 34px
  Padding bottom: env (safe area inset bottom); // is the height of the bottom arc 34px
}

@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

@Media query

@mixin iphonex-css {
  Padding top: constant (safe area inset top); // the height of navigation bar + status bar is 88px
  Padding-top: env (safe-area-inset-top); // is the height of the navigation bar + status bar 88px
  Padding left: constant (safe area inset left); // 0 if there is no vertical screen
  Padding left: env (safe area inset left); // 0 if there is no vertical screen
  Padding right: constant (safe area inset right); // 0 if there is no vertical screen
  Padding right: env (safe area inset right); // 0 if there is no vertical screen
  Padding bottom: constant (safe area inset bottom); // is the height of the bottom arc 34px
  Padding bottom: env (safe area inset bottom); // is the height of the bottom arc 34px
}

/*IPhone x adaptation*/
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

supplement

Attention item

Env and constant can only take effect when viewport fit = cover. The safari console used above can detect the web pages in the simulator and open the web inspector

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

What is Baidu’s secure openrasp project?

What is Baidu‘s secure openrasp project? In the history of this article, the official account is from the public technology. Welcome to redistribute and share knowledge, and respect copyright tagging authors and sources. At the end of the conversation, c0debreak opened a “confidential document” for me to see. It’s a secret that a otaku has […]