CSS adapts to iPhone x screen security area

Time:2019-11-20

scene

Compared with other mobile phones before, the iPhone X has changed from a sea screen at the top of the screen to a small black bar instead of a physical button at the bottom. This change has led to new adaptation problems on the page in web development.

For example, some buttons that need to be pasted on the bottom, the calling tabbar and the bottom pop-up box will be blocked by small black bars on the iPhone x, or there will be white gaps on the page.

CSS adapts to iPhone x screen security area
CSS adapts to iPhone x screen security area
CSS adapts to iPhone x screen security area

Solve the code first

<head>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
</head>
body {height: 100vh;}
/*Your pasted elements*/
.container {
  position: aboslute;
  bottom: 0;
  Padding bottom: constant (safe area inset bottom); / * IOS compatible < 11.2*/
  Padding bottom: env (safe area inset bottom); / * IOS compatible > = 11.2*/
  ...
}

Some new knowledge

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 blue area below:


Apple’s official document: adaptability and layout

viewport-fit

New features of IOS 11: apple can set three values to adapt to an extension of iPhone x to the existing viewport meta tag, which is used to set the layout of web pages in the visual window:

  • Contain: the visual window completely contains the content of the web page (left figure)
  • Cover: the content of the web page completely covers the visible window (right figure)
  • Auto: default value, consistent with contain

CSS adapts to iPhone x screen security area

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>

Reference document: viewport fit descriptor

env

The new feature of IOS 11, a CSS function of WebKit, is used to insert variables defined by user agent into CSS to set the distance between security area and boundary. There are four predefined variables:

  • Safety area inset left: distance between safety area and left boundary
  • Safety area inset right: distance between safety area and right boundary
  • Safety area inset top: distance between safety area and top boundary
  • Safety area inset bottom: distance between safety area and bottom boundary

Env () must be used with viewport fit = cover!

What we use most issafe-area-inset-bottom, which represents a safe distance not covered by a small black bar.

    padding-bottom: env(safe-area-inset-bottom);

CSS adapts to iPhone x screen security area

Reference: designing websites for iphone-x, MDN / env()

reference

https://aotu.io/notes/2017/11…

Recommended Today

How to share queues with hypertools 2.5

Share queue with swote To realize asynchronous IO between processes, the general idea is to use redis queue. Based on the development of swote, the queue can also be realized through high-performance shared memory table. Copy the code from the HTTP tutorial on swoole’s official website, and configure four worker processes to simulate multiple producers […]