iPhone X Adaptation Solution
In September 2017, Apple released the iPhone X model. For its "Liu Haier" and the bottom Home Indicator, Qzone H5 also made compatible adaptations for the first time. During the adaptation process, we also tried these three solutions, as follows:
Solution 1: Client Adaptation
The client directly restricts the safe area of the webview to the area excluding the safe area. The page will be displayed in the grey webview as shown below:
Advantages and Disadvantages
Advantages: H5 front-end development does not have any adaptation workload.
Disadvantages: The page will be b2b data limited to the webview area limited by the client, and there will be no full screen effect.
Solution 2: Use media query
Add to the meta tag of the html structure for iPhoneX models
<meta name=”viewport” content=”…,viewport-fit=cover” />
add in css
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { …{ padding-top: 44px; } …{ padding-bottom: 34px; } }
Adaptation effect:
Advantages and Disadvantages
Advantages: For iPhone X adaptation, the most simple, direct and effective method will not affect other iOS models.
Disadvantages: For full-screen/through-top title bar/horizontal screen situations, different CSS codes must be used for adaptation, which is not flexible enough. In addition, if Apple releases another model like the iPhone X plus next year, the adaptation work will have to start all over again.
Solution 3: Use the new properties provided by Apple
Apple provides special attribute support for the adaptation of H5 pages on iPhone X, including adding viewport-fit and adding constant (safe-area-inset-X) and env (safe-area-inset- X) , these attributes are related to all iPhone models above iOS11 (not only iPhone X), so take the iOS version as the difference to analyze the H5 page under full screen:
(1) For systems below iOS11.0
The viewport-fit and constant(safe-area-inset-X)/env(safe-area-inset-X) attributes under the meta tag of the H5 page will not be recognized.
(2) System for iOS11.0-iOS11.1
When viewport-fit=cover is set, the H5 page will cover the full-screen display in the safe area of the page, but this will cause the page elements to be blocked by "bangs" and the bottom Home Indicator, so Apple provides constant(safe- area-inset-X) distance to avoid occlusion problems.
These will show different values under different webviews, and we will leave them for later analysis.
In addition, the page does not add viewport-fit=cover by default viewport-fit=contain/auto, that is, the page we see cannot cover the safe area. At this time, the value of constant (safe-area-inset-X) is 0 .
Therefore, when viewport-fit=cover is added to the viewpoint of the meta tag, the performance of the constant (safe-area-inset-X) value under iOS10 and iOS11 is different.
(3) For iOS11.2 and above systems
The constant() function has been changed to env(), and the rest is the same as iOS11.2 and below (see point 2 for details). In addition, iOS11.2 added CSS functions: min() and max(). E.g:
padding-left: max(12px, env(safe-area-inset-left));
When the value of env(safe-area-inset-left) changes because the webview changes, the value can be changed accordingly, take the larger value of 12px and env(safe-area-inset-left).
The summary is as follows: