iOS compatible Iphonex ios10 IOS11

Suppose you have a fixed position in the title bar, and your iOS10 CSS might be written like this:

{    position: fixed;     top: 0;     Left: 0;     Right: 0;     height: 44px;     padding-top: 20px/**/}

 

In order to automatically adjust iphone x and other iOS11 devices, you can add them to the meta tag viewport viewport-fit="cover" :

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

Then constant() modify the values through the CSS padding-top :

 header  { position :  fixed ;  top :  0 ;  left :  0 ;  right :  0 ;     height :  44px ; /*   Status bar height on IOS  */      Padding-top :  20px ; /*   Status bar height on IOS 11+  */  Padding-top :  constant (safe-area-inset-top) ;}

For older devices that do not know how to fix the constant() syntax, you can do a degraded processing. You can use the CSS calc() function. can also be borrowed @supports to use.

Header{position:fixed;Top:0; Left:0; Right:0;Height:44px;/*Status Bar height on IOS*/Padding-top:20px; }@supports (constant (safe-area-inset-top)){Header {/*Status Bar height on IOS 11+*/Padding-top:constant (safe-area-inset-top); }}

Original: Http://www.w3cplus.com/css/the-notch-and-css.html? W3cplus.com

iOS compatible Iphonex ios10 ios11