This article is a belated summary, recently we made an H5 project embedded in the app page inline, by default the APP side will not do any processing, that is, the top and bottom need extra processing

practice

The default ios top status bar is 20px, if there is a fringe is 44px, of course, the actual development does not need to use JS to judge, because ios11 after the new security zone, used to define the scope of the visual window, it has a total of four properties

  • Safe-area-inset-left: indicates the left distance of the security zone
  • Safe-area-inset-right: indicates the distance between the security zone and the right boundary
  • Safe-area-inset-top: indicates the distance between the security zone and the top boundary
  • Safe-area-inset-bottom: indicates the distance between the security zone and the bottom boundary

It’s easy to use:

padding-bottom: env(safe-area-inset-bottom);
Copy the code

Add in the meta of the HTML file

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

Env can only be used if viewport-fit=cover is set. Note that these are portrait cases

Env second argument

Both env and constant support the second argument, as a backstep to unsupported environments. For example:

/* Fall back to the second argument */ if not supported
padding-bottom: env(safe-area-inset-bottom, 20px);
Copy the code

@supports additional judgment

To prevent some Android devices from using safe-area-inset-top, add -webkit-overflow-scrolling: touch

-webkit-overflow-scrolling is supported only by iOS Safari

@supports((height: constant(safe-area-inset-top)) or
      (height: env(safe-area-inset-top))
  )
  and (-webkit-overflow-scrolling: touch) {
  / * * / code
}
Copy the code

Fixed writing

  • Calc, just add the security range to the original value
bottom: calc(50px(Assumed value) +env(safe-area-inset-bottom));
Copy the code
  • Padding: Add padding inside the padding
padding-bottom: env(safe-area-inset-bottom);
Copy the code

Extra points of attention

Because that’s all there is to it, there is also a bit of compatibility that needs extra attention

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

Since ios11.2 no longer supports constant, env will be used instead

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

The last

You can click star if it helps you

Refer to the article

  • Adapting the web to the iPhoneX is that simple

  • IOS Bangs H5 CSS adaptation