IPhone X is a universal solution for mobile-H5 pages

A: This article provides two Solutions 1. Terminal Solutions (best, recommended) 2.web Solutions

Introduction: The advent of the IPhone X, on the one hand for the entire mobile phone industry development is extremely innovative leader, on the other hand, the existing Business page adaptation brings new challenges. For each business in hand Q, there are many H5 pages affected by iphone X, what quick and effective ways should be taken to deal with it?

The current H5 page can be divided into the banner page and non-banner page two, each page may have the bottom action bar, as follows:

Banner Page

Top of the banner

Most of the first-level pages in some businesses use the top banner banner effect, because the iphone x in the status bar increases the height of 24px, for the current banner banner specification of the content area will be blocked.

Solution: For the banner page at the top of the page add a layer of 44px of black adaptation layer, the entire page to move down 44px.

This practice, although not in line with Apple's requirements of the design specifications, but due to a short period of time to update all the cost of banner is too high, you can first such a simple process, the subsequent optimization banner design show.

Bottom tab bar/action Bar

Some pages use the bottom tab bar/action Bar, as the iphone x removes the bottom home button instead of the 34px height of the home Indicator, which can cause some obstruction to the current bottom tab/action Bar.

Solution: Add a layer of 34px at the bottom of the page to the adaptation layer, move the action bar up to 34px, color can be customized.

Non-Banner page

Bottom tab bar/action Bar

For the same reason, the home Indicator with 34px height at the bottom will cause some obstruction to the current bottom tab/action Bar.

Solution: Add a layer of 34px of color to the bottom of the page, move the action bar up to 34px, and the color can be customized.

About safe areas

There may be questions here, why the page content of the non-banner is on the bottom, and the button is above the security area?

The problem concerns security zones, and the difference between iOS11 and previous versions is that WebView places more emphasis on safe areas. This means that if you set top:0 to a page element, it will render below 44px at the top of the screen, which is below the status bar. If the page element is set to bottom:0, it will be rendered above 34px on the bottom of the screen, above the bottom security area.

To address this embarrassing situation, Apple has provided us with a solution to set the META tag of viewport.

<meta name="viewport" content= "width=device-width, initial-scale=1.0, Viewport-fit =cover ">

The option that viewport can set is Viewport-fit, which has three optional values:

• Contain:the viewport should fully contain the Web content. The visual window completely contains the page content

• Cover:the Web content should fully cover the viewport. Page content completely overwrites the visual window

• Auto:the default value, the role of contain

By setting Viewport-fit=cover for a page, you can extend the page's layout area to the top and bottom of the page.

For the banner page, set the properties of the Viewport-fit, found that will not take effect, after working with colleagues to check the source of hand Q found that the terminal for the WebView banner situation set uiscrollviewcontentinsetadjustmentnever properties, The margins of the upper and lower security areas are removed, which invalidates the upper and lower margins of the security area.

In addition, after 2 versions of the WebView test, found that wkwebview in the rendering of the page, the bottom button in the position of inconsistent, may be an unresolved bug:

Using the Web scenario:

According to the above design, it can be handled as follows:

1. Modify Page Viewport-fit Properties

2. Link a iphonex.css on the H5 page to add a corresponding adaptation layer to the page visited by iphone X

3. Add the appropriate class name to the corresponding DOM structure on the H5 page

Iphonex.css

@media only screen and (device-width: 375px) and (device-height: 812px) and /c4>

(-webkit-device-pixel-ratio: 3) {

/* Add Head Adaptation Layer */

. Has-topbar {

Height: 100%;

Box-sizing: border-box;

Padding-top: 44px;

&:before {

Content: ";

Position: fixed;

Top: 0;

Left: 0;

Width: 100%;

Height: 44px;

Background-color: #000000;

Z-index: 9998;

}

}

/* Add bottom adaptation layer */

. Has-bottombar {

Height: 100%;

Box-sizing: border-box;

Padding-bottom: 34px;

&:after {

Content: ";

Z-index: 9998;

Position: fixed;

Left: 0;

Bottom: 0;

Width: 100%;

Height: 34px;

Background: #f7f7f8;

}

}

/* Navigation Action Bar Move Up */

. bottom-menu-fixed {

Bottom: 34px;

}

}

<! DOCTYPE html>

class= "Has-topbar has-bottombar" >

<meta charset= "Utf-8" >

<meta name= "format-detection" content= "Telephone=no" />

<meta http-equiv= "X-dns-prefetch-control" content= "on" >

<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=no" />

<meta name= "apple-mobile-web-app-capable" content= "yes" />

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" />

<link rel= "stylesheet" type= "text/css" href= ". /.. /css/index.v6/index.css ">

<link rel= "stylesheet" href= ". /.. /css/index.v6/iphonex.css ">

<title> Game Center </title>

<body class= "Body-index" ontouchstart= "" >

<ul class= "ui-tiled bottom-menu bottom-menu-fixed" >

<li class= "" >

<i class= "Gc-icon-normal gc-icon-find" ></i>

<div class= "txt" > Games </div>

</li>

<li class= "" >

<i class= "Gc-icon-normal gc-icon-live" ></i>

<div class= "txt" > Live </div>

</li>

<li class= "" >

<i class= "Gc-icon-normal gc-icon-compete" ></i>

<div class= "txt" > Events </div>

</li>

<li class= "" >

<i class= "Gc-icon-normal gc-icon-original" ></i>

<div class= "txt" > esports </div>

</li>

<li class= "marker" ></li>

</ul>

</body>

As above, the problem is that there are a lot of pages to be modified, and there is an extra Class name for the page, and there is a certain amount of work to remove later styles.

Since the use of the web to solve the problem is not very perfect, whether the terminal can be used to add webview to the adaptation layer, so as to solve this problem?

Using terminal scenarios:

After the communication with the terminal classmate, determine is can through the terminal way, for the iphone x model, in the original interface when the initialization can choose whether to increase the adaptation layer, so that the page does not need style processing.

This is done by adding parameters to the link to fit:

For top banner pages, add a URL parameter to increase the top black adaptation layer. Http://m.gamecenter.qq.com/directout/index?_bid=278&_wvx=1

For the bottom action bar (including banner and non-banner), add a URL parameter to increase the bottom adaptation layer and set the color.

Http://m.gamecenter.qq.com/directout/index?_bid=278&_wvx=10&_wvxBclr=0xf7f7f8

(The wvx=10 here are added with 2 and 82 feature numbers)

This way, there is no need to write a line of code, you just need to add the appropriate parameters to the page link, you can perfectly fit the iphone x ~

After the head optimization, the current top black adaptation layer can also be removed by parameter configuration

More specific technical implementations can be viewed here:

https://ayogo.com/blog/ios11-viewport/

IPhone X is a universal solution for mobile-H5 pages