scenario

Because iPhoneX has removed the physical button and changed it to a small black bar at the bottom, it will lead to screen adaptation problems. The most common scenario is that the fixed element at the bottom is blocked. For this kind of problem, we usually take the CSS or JS approach (for H5, small programs).

CSS Adaptation Solution (Recommended)

Step 1: Set the header TAB of the page

<meta name="viewport" content="width=device-width, viewport-fit=cover">
Copy the code

Viewport-fit: a new feature for IOS11 that extends meta tags for iPhoneX. Contain visual window contains all the content of the web page

Cover: The content of the web page completely covers the visual window

Auto: default: contain *[HTML]: contain viewport-fit=cover

Step 2: Set the page body in a safe zone

This step depends on the actual scene and can not be set. The effect is that the content of the bottom area will be blocked.

	body {
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom);
	}
Copy the code

Env () and constant() are new CSS functions in IOS11, There are four predefined variables safe-area-inset-bottom, safe-area-inset-top, safe-area-inset-left, and safe-area-inset-right, respectively indicating the distance between the security zone and each boundary. At this point we only need to worry about afe-area-inset-bottom (this is different in horizontal and vertical screens). If these two properties are not supported, the browser ignores them.

Pay attention to,constant()It is not available after IOS11.2 and is therefore backward compatible, i.eenv(), and the two positions can not be exchanged;

Constant (): compatible with IOS < 11.2 env(): compatible with IOS >= 11.2Copy the code

*[HTML]: Hypertext markup language

Step 3: Set the height of the fixed element

For the target element, you can set either bottom, padding-bottom, or margin-bottom:

.fixed { bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); // Same as}Copy the code

Add a blank block height = constant(safe-area-inset-bottom).

JS adaptation scheme

Add padding-bottom or add a blank block to the fixed element at the bottom by judging the model. There is no need to go into details here.

	function isIphoneX(){
		return /iphone/gi.test(window.navigator.userAgent) && 
					window.devicePixelRatio && 
						window.devicePixelRatio === 3 && 
							window.screen.width === 375 && 
								window.screen.height === 812;
	}
Copy the code