Designer from Tencent ISUX Social User Experience Design Center for iPhone X adaptation of H5 page solution.
The current H5 page can be divided into two types: open column page and non-open column page. Each type of page may have a bottom action bar, as follows:
Banner page
At the top of the banner
Most of the first-level pages of some businesses use the effect of the banner at the top. As iPhone X has increased the height of 24px in the status bar, the content area of the banner specification will be blocked.
Solution: Add a black fit layer 44px high at the top of a full-page page and move the entire page 44px down.
Although this approach does not meet the design specifications required by Apple, due to the high cost of updating all the banners in a short period of time, it can be handled simply in this way first, and then optimize the design presentation of the banner.
Bottom Tab bar/action bar
Some pages use the bottom Tab/action bar, but the iPhone X has removed the bottom Home button and replaced it with a 34px Home Indicator, which is a bit of a hindrant to the current bottom Tab/action bar.
Solution: Add an adaptation layer 34px high at the bottom of the page, move the action bar 34px up, and customize the color.
Non – banner page
Bottom Tab bar/action bar
For the same reason, there is a 34px Home Indicator at the bottom, which will hinder the operation of the current bottom Tab/action bar.
Solution: Add a 34px color block at the bottom of the page and move the action bar 34px up. You can customize the color.
About Safety Zones
Some of you may wonder why the content of the page goes to the bottom of the non-open column, while the buttons are above the safe zone.
This issue involves security zones, and the difference between iOS11 and previous versions is that WebView takes security zones more seriously. This means that if you set top: 0 to a page element, it will render below 44px at the top of the screen, below the status bar. If you set the page element to bottom: 0, it will be rendered above 34px at the bottom of the screen, above the bottom security zone.
To solve this awkward situation, Apple has provided a solution for setting the meta tag of the viewport.
The viewport option is viewport-fit, which has three optional values:
- contain: The viewport should fully contain the web content. The visual window completely contains the content of the web page
- cover: The web content should fully cover the viewport. The web content completely covers the visual window
- Auto: The default value, also contains The function
You can extend the layout area of a page to the top and bottom of the page by setting viewport-fit=cover.
For banner page, set the viewport – fit the properties of the find will not take effect, found that after with colleagues to check the hand Q source terminals for the WebView banner set UIScrollViewContentInsetAdjustmentNever properties, The margins of the upper and lower safety zones were removed, rendering the upper and lower safety zones invalid.
In addition, after two versions of WebView test, it was found that WKWebView rendered the page, the bottom button in the position is inconsistent, which may be an unsolved bug:
Using a Web solution:
According to the above design scheme, it can be handled as follows:
- Example Modify the viewport-fit attribute of the page
- Link to an iphonex. CSS on the H5 page to add the appropriate adaptation layer to the page visited by the iPhone X
- Add the appropriate class name to the corresponding DOM structure on the H5 page
iPhone X .css
The problem with this, as mentioned above, is that there are a lot of pages to modify, and it introduces additional class names to the page, and it also requires some work to remove styles later.
In addition, using styles to add an adaptation layer to the top of the page, the black adaptation layer will move when the page is pulled down:
Since the use of the Web way to solve this problem is not very perfect, can we increase the adaptation layer to webView through the terminal, so as to solve this problem?
Using terminal scheme:
After communication with the terminal students, it is confirmed that the adaptation layer can be added during the initialization of the native interface through the terminal, so that the page does not need style processing.
Specifically, by adding parameters in the link for adaptation:
- Parameter name :_wvx Controls iPhone X adaptation
- Parameter name :_wvxTclr Controls the color of the top adaptation layer
- Parameter name :_wvxBclr Controls the color of the bottom adaptation layer
For pages with top columns, add the top black fit layer by adding the URL parameter.
For bottom action bars (both open and non-open), add the bottom adaptation layer and set the color by adding the URL parameter.
(where WVX =10 is the sum of 2 and 8 features)
This way, you don’t need to write a single line of code, just add adaptation parameters to the page link, and it will work perfectly for the iPhone X
More detailed technical implementations can be viewed here:
Ayogo.com/blog/ios11-…
The article is reprinted from Tencent ISUX Social User Experience Design Center