IPhone x design website adaptation

Time:2021-6-24

Design website adaptation for iPhone x

Almost all front-end developers will come into contact with designing H5 web pages for iPhone x, in which they have to adapt to its unique security area in order to optimize the user experience.

Safe area

Layout guides define rectangular areas that don’t actually appear on the screen, but help with content positioning, alignment, and spacing. This area is the security area. The security area can also prevent the content from overlapping below the status bar, navigation bar, toolbar and tab bar, as shown in the blue area below

IPhone x design website adaptation

Safari native web page

Safari in the new iPhone X has been well adapted to the safe area, your H5 page in Safari open will be in the safe area. If you want to open your H5 web page in a browser other than Safari, you have to reconsider the adaptation of the security zone.

How to design

viweport-fit:cover

The default value of viewport fit is auto, which results in automatic insertion behavior. To disable this behavior and make the page layout the maximum size of the screen, set the viewport fit to cover

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Limit to safe area

After setting up the viewport fit, you need to limit the content to the safe area. IOS 11 WebKit proposes env() function, which is used to set the distance between the security area and the boundary

  • Safe area inset left: the distance between the safe area and the left boundary
  • Safe area inset right: the distance between the safe area and the right boundary
  • Safe area inset top: the distance between the safe area and the top boundary
  • Safe area inset bottom: the distance between the safe area and the bottom boundary

Note: env() doesn’t work when viewport fit = contain. It must be used with viewport fit = cover. For browsers that do not support env(), the browser will ignore it.

In particular, many small partners may want to use the constant() function, and point out in the official document that:

IPhone x design website adaptation

Therefore, constant() can no longer be used after IOS 11.2. In this aspect, we need to do the following compatibility:

.post {
    padding: 12px;
    padding-bottom: constant(safe-area-inset-bottom);  /*  Compatible with IOS < 11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*  Compatible with IOS > = 11.2*/
}

min()、max()、calc()

In actual development, it’s not so simple. The state of the horizontal and vertical screens of the device will cause the objects of safe area inset bottom to be inconsistent, and the set value will have problems. You can then consider using mathematical calculations…

.post {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

In the above example: when the vertical screen of the device is safe area inset bottom, it will be greater than 12px, so the value is safe area inset bottom; When the screen is horizontal, the safe area inset bottom is 0, and the default 12px will be adopted, so that the bottom of the page will not be too close to the edge when the screen is horizontal.

You can also use calc() to set the default value of 12px, whether safe area inset bottom or not. As follows:

.post {
    Padding bottom: Calc (12px (default) + env (safe area inset bottom));
}

@supports

If you just want this adaptation to be only for iPhone x devices, you can use @ supports to isolate the adaptation styles.

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.post {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

Write at the end

The above solutions are for reference only. I am interested in researching the official documents (reference link at the bottom) compatible with iPhone devices.

reference resources

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

https://webkit.org/blog/7929/designing-websites-for-iphone-x/