There are three types of phone iphoneX changes in appearance: rounded corners (corners), Liu (sensor housing) and a black strip (Home Indicator). To adapt these phones, the concept of security zone change was born: a safe area that is free from the effect of the above three visible window range.
To ensure the display of the page, the page must be limited to a safe range, but does not affect the overall results.
viewport-fit is an attribute specifically to fit iPhoneX born, how it is used to limit the pages on display in a safe area, it has two values,
contain (default): completely visible window that contains Web page content
cover: page content completely cover the visible window
We need the top and bottom of reasonable placed in the secure area, iOS11 two new CSS functions env, constant, and for setting a safe distance from the border area.
Internal function may be four constants:
safe-area-inset-left: a safe area away from the left border
safe-area-inset-right: border area a safe distance from the right
safe-area-inset-top: a safe area away from the top border
safe-area-inset-bottom: a safe area away from the bottom border
You must be specified in order to use the env viweport-fit, constant these two functions
<meta name="viewport" content="viewport-fit=cover">
.component {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
Note: constant <version 11.2 of the entry into force, env in iOS> iOS = in version 11.2 of the entry into force, css often want to set them at the same time, the page will be confined within the security zone
Reproduced in: https: //www.jianshu.com/p/f99f101fc12e