From IMWeb community, author: zzbozheng, original link

In the early morning of September 13th, we finally waited for apple’s highly anticipated new product release conference. I believe many friends are expecting the new iPhone to cut off the fringe and beard, but what they never expected is that they were waiting for three different sizes of iPhone X. My god, after waiting so long, you show me this? Programmers scrambled to find the logical pixels of the new iPhone and figure out how to fit the bangs and the beard.

Past practice

In fact, for the front end of the web, bangs are not needed in most scenarios, because The statusBar of Safari or client (wechat, hand Q, etc.) has smoothed the top bangs for us, we only need to care about the black beard at the bottom, because if there is a button at the bottom of the page, We’ve used the iPhone X jaw in the past, but in retrospect it wasn’t the right thing to do. ClassName: has-bottombar

<html class="has-bottombar">
    <head></head>
    <body></body>
</html>
Copy the code

With the corresponding CSS:

@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) {
  .has-bottombar {
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 34px;
  }

  .has-bottombar:after {
    content: ' ';
    z-index: 9999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;}}Copy the code

The solution here is to use a media query that takes the size of the iPhone X (375px by 812px) and does a special processing. It does two things: 1. Leave 34px spacing at the bottom of the HTML. Keep the content on the inside of the page at 34px spacing at the bottom of the HTML to avoid being obscured by the beard. 2. Create an After pseudo-class by setting Position: Fixed to the bottom of the page and setting it to white. This process mainly blocks the background color of the page. The effect is as follows:






This may not have been a problem before September 13, but after September 13, front-end developers will have a big head, because the new three iphones are all different sizes (logical pixel XR: 375 * 812; xs: 414 * 896; Xs Max: 414 * 896;) Therefore, I started to modify the Media Query… If we add a few more sizes next year it’s going to be an endless cycle of tweaking.

Correct posture

In ios 11 we can use viewport-fit=cover + safe-area-inset-*. So is it that you won’t be able to use these under ios11? Yes, but have you seen an iPhone X + with ios 11 or less? So we can have a good time.

Before we start, let’s know what a safe area is. To put it simply, it means the area except for bangs and beards.

About the viewport – fit

Viewport-fit has three values: contain: the visual window completely contains the page content (left) Cover: the page content completely covers the visual window (right) Auto: default value, with the presentation of the same

How do I determine the viewport-fit value? There are some questions to consider: 1. When the viewport Bounding Box is set on the non-rectangular display, the area of the Viewport Bounding Box is larger than the display area, resulting in the clipping area. 2. It is better to set viewport-fit to cover and consider cutting parts of the actual display page. Another consideration is that safe-area-inset-* will not work if you set viewport-fit:contain, which is the default. Click here to learn more about viewport-fit

About safe – area – an inset – *

With all the iPhone X’s irregular shapes, how do we control page elements to secure areas? Apple provides the location of the safe zone to developers via the CSS property, which can be done via the CONSTANT () CSS function:

Constant (safe-area-inset-top) : Specifies the number of CSS pixels in the top security area of the Viewport. Constant (safe-area-inset-left) : Set this parameter in the security zone at the bottom of the Viewport (CSS pixels). Set the amount in the security zone to the right of the Viewport (CSS pixels)

In short, we can use constant() to get the unsafe margin, and then use the padding or margin to control the page elements to avoid the unsafe area. Webkit adds CSS Functions in iOS11: Env () replaces constant(). Env () is recommended in the documentation, while constant() is deprecated starting with Safari Techology Preview 41 and iOS11.2 Beta. In browsers that do not support env(), this style rule is automatically ignored without affecting the normal rendering of web pages. For maximum compatibility, we can use constant() and env() together.

.yourFooterClass { padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */}Copy the code

This article will write env() only for brevity.

Practice a wave

First, set the layout of the page in the visual area

Added the Viweport-fit attribute to make the page content completely cover the entire window:

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

Second, let the main content control in the safe area

Let’s say our bottom button is 50px high:

body { padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: 50px; /* Compatible with devices that do not support env() */ padding-bottom: calc(env(safe-area-inset-bottom) + 50px); */ padding-left: env(safe-area-inset-left); }Copy the code

There are two key points: 1. The padding-bottom: 50px written in the front. To be compatible with devices without a bottom beard, make the body content offset by the height of the bottom button, so that the button does not block the content. 2, padding-bottom: calc(env(safe-area-inset-bottom) + 50px); If the device supports env, then Calc will calculate a valid value. This clause has the highest priority, overriding the padding-bottom: 50px. Otherwise, calc will calculate an invalid value, and this statement will not take effect. This can be used in devices that do not support env.

So far, the content on the left side of the landscape scene is not obscured by bangs:

Three, the bottom button processing

Set padding-bottom: env(safe-area-inset-bottom); set padding-bottom: env(safe-area-inset-bottom); A padding value is added to make the bottom extend an unsecured area. Set background: #FFF to make the entire background of the.btn-Container white (including the padding-bottom area just added) so that the bottom content is obscured. Box-sizing: content-box; Box-sizing: border-box; box-sizing: border-box; } So the padding doesn’t extend out, so in this case we’ll change it back to content-box.

.btn-container {
  box-sizing: content-box;
  height: 50px;
  line-height: 50px;
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: #FFF;
  padding-bottom: env(safe-area-inset-bottom);
}

.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #00c340;
  border: none;
}
Copy the code

Look at the effect:



The last

If matching bangs and beards requires searching all over the place for logical pixels and a new iPhone, it’s probably not the right posture. In addition, found in the landscape scene has a more interesting effect, you can understand, but in the actual business should not need to do so fancy:


Elements scroll automatically around the iPhone X’s bangs with CSS Shapes