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

Docker learning (5) basic command of dockerfile

To learn dockerfile, you need to understand its basic commands From – base image Try to use the official reference image [x] From Tomcat: 8.5.50-jdk8-openjdk 񖓿 make reference image (based on Tomcat: 8.5.50-jdk8-openjdk) [x] From CentOS ා make a base image based on CentOS: latest [x] From scratch? Does not depend on any reference image […]