Tutorial on how to adapt iphoneX to client H5 page

At present, many APP designers have begun to turn to H5 front-end development, but solving the adaptation problem for 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.

Since the iPhone

1. Top bar

The previous client has always used the method of 20pt for status bar + 44pt for navigation bar. Since iphone

2. Bottom operation bar

Since the iPhone At this time, a blank safe area needs to be left at the bottom, and the final bottom line of the page content should be at the corner of the mobile phone. The height of this safe area is 34pt.

3. Adaptation method

In conclusion, based on the current unique mobile phone parameters of iphoneX, the adaptation method we can adopt is:

(1)meta tag

In order to adapt to iPhone

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

(2) Media inquiries

1. Use constant function

The constant function can only be used if 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 the adaptation method according to 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 query whether it is an iphoneX according to the client protocol to maintain consistency with the client.

4. Parameter explanation

The parameters in the above code are explained as follows:

• safe-area-inset-bottom — A new feature in ios11, used to set the distance between the safe area and the boundary
• 375 — The width of the iphoneX device
• 812 — The height of the iphoneX device
• 3 — The resolution of the iphoneX device
• 724 — iphoneX device height (812) - top bar height (88)
• 34 — Bottom safety zone height

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

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message for communication. Thank you for your support of VeVb Wulin Network.