With the gradual popularization of iPhoneX and later models, the safety area of the small black bar at the bottom has also become an issue that needs special attention in front-end development. If there is no adaptation, the small black bar at the bottom may cover the content of the page or cause confusion in the UI interface, seriously affecting the user experience. This article will introduce how to use CSS and JavaScript codes to adapt the safe area of the small black bar at the bottom of models above iPhoneX.
1. The concept of safe area
There is a small black bar at the bottom of the screen on iPhoneX and above models, which is called "notch chin". Since this area is different from the screen area, it needs to be set as a safe area. The safe area means that when the page is laid out, the content can be prevented from being blocked by small black bars, so as to ensure the consistency of the experience on the user interface.
2. The size of the safe area
For models above iPhoneX, the height of the small black bar at the bottom is 34px, and the width is 0.1 times the screen width. We can also dynamically obtain the height and width of the safe area through JavaScript code for adaptation.
3. Use CSS Adaptation
In CSS, we can use the safe-area-inset-* series of properties to adapt to the safe area.
Add the following code to the body element to leave a safe distance below the small black bar area:
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
Among them, constant and env are two functions newly introduced by CSS for setting variables. Constant represents a constant, and env represents an environment variable. In the above code, safe-area-inset-bottom indicates the height of the bottom safe area.
For fixed positioned elements, you can use the safe-area-inset-* series of attributes to adapt.
.fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
Among them, the padding-bottom attribute is used to leave a safe distance below the small black bar area.
Fourth, use JavaScript adaptation
In JavaScript, we can use window.screen.availHeight and window.screen.availWidth to get the available height and width of the screen, so as to calculate the height and width of the bottom safe area.
Get the height of the bottom safe area:
function getSafeAreaHeight() {
const screenHeight = window.screen.availHeight;
const screenWidth = window.screen.availWidth;
const isLandscape = screenWidth > screenHeight;
if (isLandscape) {
return 0;
} else if (screenHeight >= 812) {
return 34;
} else {
return 0;
}
}
In the above code, if the screen is landscape, the height of the bottom safe area is 0. If the screen height is greater than or equal to 812px, the height of the bottom safe area is 34px, otherwise it is also 0px.
Get the width of the bottom safe area:
function getSafeAreaWidth() {
const screenHeight = window.screen.availHeight;
const screenWidth = window.screen.availWidth;
const isLandscape = screenWidth > screenHeight;
if (isLandscape) {
return 0;
} else {
const ratio = screenWidth / 375;
return Math.floor((screenWidth - 375) / (2 * ratio));
}
}
In the above code, if the screen is landscape, the width of the bottom safe area is 0. If the screen is vertical, calculate the width of the bottom safe area based on the current screen width.
Adapt dynamically using JavaScript:
function adaptToSafeArea() {
const safeAreaHeight = getSafeAreaHeight();
const safeAreaWidth = getSafeAreaWidth();
const styleText = `
.safe-area-bottom {
height: ${
safeAreaHeight}px;
width: ${
safeAreaWidth}px;
}
`;
const styleNode = document.createElement('style');
styleNode.innerHTML = styleText;
document.head.appendChild(styleNode);
}
In the above code, after we get the height and width of the bottom safe area, we use JavaScript to dynamically create a style tag, set its internal style, and then add the tag to the document head to achieve dynamic adaptation.
Summarize
To sum up, both CSS and JavaScript can be used to adapt the safe area of the small black bar at the bottom of iPhoneX and above models. Which method to choose can be decided according to project needs and personal preferences.