How to Adapt the iPhone X to the H5 page of the Client

How to Adapt the iPhone X to the H5 page of the Client

Preface

At present, many APP designer partners have begun to develop H5 front-end, but solving the adaptation problem of all iPhone and Android models is our top priority. Whether you are designing an APP or writing a front-end H5. you must consider mobile compatibility.

Because iphoneX has a full screen and a small Liu Hai is retained, many previous mobile H5 pages need to be adapted with the App client as follows:

1. Top navigation bar

The previous client has been using the status bar 20pt + navigation bar 44pt. Because iphoneX has an additional piece of Liu Hai, iphoneX uses the status bar 44pt + navigation bar 44pt separately, which means that the embedded H5 page moves down to 24pt as a whole.

2. Operation bar at the bottom

Because iphoneX is a full screen, the bottom of the page will be cut off by the curved corner, especially the tab with fixed floating at the bottom will be seriously affected. At this time, you need to leave a blank security area at the bottom. The bottom line of the page content should be at the corner of the mobile phone. The height of the security zone is 34pt.

3. Adaptation Method

In conclusion, we can use the following method to adapt to the current mobile phone parameters of iPhone X:

(1) meta tag

Ios11 adds a feature for the existing viewport meta tag to adapt to iphoneX: viewport-fit. If the client does not enable full-screen adaptation, you can use this feature if the page needs full-screen coverage:

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

(2) Media Query

1. Use the constant function

The constant function can be used only when viewport-fit = cover is set.

@ Supports (bottom: constant (safe-area-inset-bottom) {selector {padding-bottom: constant (safe-area-inset-bottom); padding-bottom: calc (30px (assumed value) + constant (safe-area-inset-bottom); // select an adaptation method based on the actual situation }}

2. Use the unique model parameters of iphoneX

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {    #buy {        padding-bottom:34px;     }}

(3) js judgment (Jquery is used below)

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){    #buy {        padding-bottom:34px;     }}

(4) Client Protocol
 

You can also request the client to check whether the client is an iPhone X based on the client Protocol to maintain consistency with the client.

4. Parameter explanation

The parameters in the above Code are described as follows:

• Safe-area-inset-bottom-ios11 is added to set the distance between the security zone and the border.
• 375-iphoneX device width
• 812-height of the iPhone X Device
• 3-resolution of the iPhone X Device
• 724-height of the iPhone X Device (812)-height of the top sidebar (88)
• 34-bottom security area height

The above parameters are calculated based on the standard 1pt = 1px. If the H5 page adopts the scaled rem mode, 1pt = 1px * 3 (iphoneX resolution)

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.