When creating mobile Web pages, deal with the IOS security zone

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

At the beginning

Since the release of apple’s iphoneX, front-end developers have had to pay more attention to the adaptation of IOS’s so-called security zone scope when developing mobile Web pages. This is essentially the iPhone after the iphoneX, where you need a little more space at the top and bottom of the page.

The main reason for the problem is the so-called bangs on the screen, with a small black bar at the bottom.

As shown in figure:

Our upper and lower reserved space is to prevent the content of our page from being blocked by these elements, but if you do the page is just placed in some browsers (wechat built-in browser) within the spread, generally we do not need to deal with the top bangs, the top is generally the original title bar, we do not have to take care of. But if your page is going to be embedded in your APP display and your APP is going to be full-screen, then you still have to deal with that.

Here we introduce how to use CSS and JS respectively, depending on the scenario you can choose.

CSS

Among the new features in iOS11, Webkit includes two new functions env() and constant(), as well as four predefined constants:

• safe-area-inset-top: The distance between the security zone and the top boundary, the status bar + navigation bar is about 88px.
• safe-area-inset-left: Distance between the security zone and the left border, 0 in portrait mode.
• safe-area-inset-right: Distance between the security zone and the right border, 0 in portrait mode.
• safe-area-inset-bottom: Distance between the safety zone and the bottom boundary, approximately 34px high.

We can use them like this:

Body {/* Compatible with iOS < 11.2 */ PADDING-TOP: constant(safe-area-inset-top); padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); Padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }Copy the code

Of course, you can also use it alone on an element that is fixed at the bottom:

div{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
Copy the code

JS

Of course, sometimes the simple CSS method can not meet the actual requirements of the scene, so we need to determine which IOS mobile phone screens need special processing.

The Series parameters of iphoneX are as follows:

According to these parameters, we take the long screen of aN iPhone, that is, the height of the screen, as a judgment condition:

/** * export function isIphoneX(){if (typeof window! == 'undefined' && window) { var faultTolerantVal = 10; / / fault tolerance value return/iphone/gi test (window. The navigator. UserAgent) && (window. Screen. Height + faultTolerantVal) > = 812; } return false; };Copy the code

At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.