How CSS adapts to iPhone full screen

Time:2021-6-29

1、 Media query mode

/*IPhone x adapter*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*IPhone XS Max adapter*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*IPhone XR Max adapter*/
@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 scheme can add the width of the security area at the bottom of the element, no problem. But in Safari and other browsers with bottom bars (the page display area is already inside the safe area), the width of the safe area will also be added.

2、 CSS function

The CSS function provided by apple after the launch of full screen, IOS < 11.2 is constant(), IOS > 11.2 is env(). You can fill in the safe area inset top, safe area inset left, safe area inset right and safe area inset bottom corresponding to the upper, lower, left and right safe area widths. Env and constant only work when viewport fit = cover.

The code is as follows:

Add the meta tag to the viewport fit = cover


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

CSS writing, 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 one, and the code is more concise

So far, this article about the method of CSS adapting to the full screen of iPhone is introduced here. For more relevant CSS adapting to the full screen of iPhone, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

[domestic MCU transplantation] transplant RT thread to domestic chip hc32f460petb

This article was originally published by RT thread forum users @ who want to be Princes:https://club.rt-thread.org/as… Preparation before transplantation premise Now chip prices are rising, and many domestic manufacturers are constantly looking for alternatives. Although the company is not very sensitive to the chip price, as a new generation of migrant workers, chrysanthemum is still […]