Regarding the problem of iphoneX adapting to client H5 page

This article mainly introduces to you the relevant information about iphoneX adaptation client H5 page. The introduction in the article is very detailed and has certain reference learning value for everyone's study or work. Friends who need it can learn together below. Bar.

Preface

Currently, many APP designers have begun to turn to H5 front-end development, but to solve the problem of all iPhone and Android models The issue of adaptation is our top priority. Whether you are designing an APP or writing a front-end H5, you must consider mobile compatibility.

Since the iphone The top bar

The previous client always used the method of 20pt for the status bar and 44pt for the 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

As mentioned above, the adaptation method we can use based on the current unique mobile phone parameters of iphoneX is:

(1) meta tag

ios11 adds a new feature to the existing viewport meta tag in order to adapt to iphoneX: viewport-fit. If the client does not do full-screen adaptation and the page wants full-screen coverage, you can use this feature:

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

(2) Media query

1. Use the 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(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}

2.Use iphoneX Unique model parameters

@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

can also be requested according to the client protocol The client queries whether it is an iphoneX to keep it consistent with the client.

4. Parameter explanation

The parameters in the above code are explained as follows:

safe-area-inset-bottom — ios11 new feature, use To set the distance between the safe area and the boundary
375 — Width of iphoneX device
812 —Height of iphoneX device
3 — Resolution of iphoneX device
724 — Height of iphoneX device (812) - Top bar height (88)
34 — Bottom safety area height
The above parameters are calculated based on the standard 1pt=1px. If the H5 page uses the rem method of scaling, then 1pt = 1px * 3 ( iphone

Related recommendations:

Use Android to imitate WeChat to load the progress bar of H5 page

Use css to implement an imitation of ios7 The switches switch button

The above is the detailed content of Regarding the problem of iphoneX adapting to client H5 page. For more information, please follow other related articles on the PHP Chinese website!