How many steps will it take to adapt Cordova project to iPhone x + IOS 11.4? Three steps

Time:2020-10-24

Recently, the new app was asked by customers to fit iPhone x, which made me feel embarrassed. Because I can’t use iPhone X and my poor girl hasn’t used iPhone x, what can I do
Check it out
After surfing the Internet for a long time, I found that it only takes three steps to fit the iPhone X

Step 1: install a plug-in

cordova plugin add cordova-plugin-splashscreen

Installing splash screen plug-in
And in the config.xml Add iPhone x startup image (size 1125 * 2436) to the file
(sometimes in the config.xml Add file may fail to detect, you can try Xcode, Resources folder- images.xcassets Add a startup image to the. Drag the picture to the mobile phone version box you want to set.)
This is how it works
How many steps will it take to adapt Cordova project to iPhone x + IOS 11.4? Three steps

The top is still ugly! What to do?

Step 2: change the meta

< meta name = "viewer" >, add viewer fit = cover

This is how it works
How many steps will it take to adapt Cordova project to iPhone x + IOS 11.4? Three steps

How did you get together!
It seems that either you are too coquettish or my header is not high enough
Step three, please!

Step 3: add a padding

.header{
     padding-top: **constant(safe-area-inset-top)**; 
     Padding top: * * env (safe area inset top); * * / * fatty bowel is important
 }

WebKit adds CSS in IOS 11 Functions:env It is recommended to use env() instead of constant(), while constant() will be discarded from safari technology preview 41 and IOS 11.2 beta. The usage of env () is similar to VaR (). In browsers that do not support env (), this style rule will be automatically ignored, which does not affect the normal rendering of web pages

Because many articles were published earlier, they only wrote constant (), so they are not easy to use under ios11.4

For these two methods, you can see the reference article at the bottom of the articleIPhone X’s gap and CSS
The above part of me is also directly copied from other people’s articles

Final effect
How many steps will it take to adapt Cordova project to iPhone x + IOS 11.4? Three steps

Hum, perfect solution


Reference articles https://blog.phonegap.com/dis…
correctly-on-the-iphone-x-c4a85664c493

Displaying a PhoneGap App Correctly on the iPhone X
According to this article, I will read it carefully with my kindergarten English after I calm down

Reference articles https://www.w3cplus.com/css/t…

IPhone X’s gap and CSS
For safe area inset top and view fit = cover, there are details of fat intestines