How to adapt CSS to iPhone full screen

1. Media query method

/*iPhone X adaptation*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XS max adaptation*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XR max adaptation*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
 .fixed-bottom{
 bottom: 37px;
 }
}

Existing problem: In WeChat webview, this solution can add the safe area width at the bottom of the element without any problem. However, in browsers with bottom bars such as Safari (the page display area is already inside the safe area), the safe area width will also be added.

CSS Functions

This is the CSS function provided by Apple after the launch of the full-screen version. For ios<11.2, it is constant(); for ios>11.2, it is env(). You can fill in safe-area-inset-top, safe-area-inset-left, safe-area-inset-right, and safe-area-inset-bottom to correspond to the width of the safe area at the top, bottom, left, and right. env and constant only take effect when viewport-fit=cover.

The code is as follows:

Add viewport-fit=cover to the meta tag

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

CSS writing method, browsers that do not support env and constant will ignore this style

.fixed-bottom{
 bottom: 0;
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
}

This solution can solve the problem of solution 1, and the code is more concise

This is the end of this article about how to adapt CSS to the full-screen iPhone. For more relevant content about how to adapt CSS to the full-screen iPhone, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!