How to adapt css to the full screen of iPhone

1. Media query method

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

Existing problems: In WeChat webveiw, this solution can add the safe area width at the bottom of the element, no problem. However, browsers with bottom bars such as Safari (the page display area is already inside the safe area) will also add the safe area width.

(Video tutorial: css video tutorial)

2. CSS function

The CSS function provided by Apple after launching full screen, ios<11.2 is constant(), ios>11.2 is env(). You can fill in safe-area-inset-top, safe-area-inset-left, safe-area-inset-right, and safe-area-inset-bottom corresponding to the safe area widths up, down, left, and right. env and constant only take effect when viewport-fit=cover.

The code is as follows:

Meta tag added viewport-fit=cover

<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);
}

Recommended tutorial: CSS basic tutorial

The above is the detailed content of How to adapt css to the full screen of iPhone. For more information, please follow other related articles on the PHP Chinese website!