Q:

iPhone X website safe area

The iPhone X landscape default safe area and notch solution. 
I added this Question to help others avoid a headache I head trying to fix my website on the new iPhone 10
Basically,  the problem is white bars

A:

The solution is to use viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

This will use the full screen but what about the notch. 
create a class 
.iphoneX{
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);  
}

and add it to the website wrapper and done?  Yes
No.  Full-width images and Full-width divs with different colors will be cut
on my website, I use <section> to add background images or colors and add a div in the section for the content, so instead of .iphoneX on the website wrapper, i added .iphoneX_rl on the div
 .iphoneX_rl{
    padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);  
}

That takes care of the right and left what about the bottom
.iphoneX_footer{
padding: 0 0 constant(safe-area-inset-bottom) 0
  }
add this to -the last div ( container) in your footer
now my website looks good on iPhone X/10, looking at my website on the iPhone 8 content goes to the edge?  no safe area time for js/jquery
if (navigator.userAgent.match(/(iPhone)/)){
  if((screen.availHeight == 812) && (screen.availWidth == 375)){

    if((window.innerHeight == "375") && (window.innerWidth == "812")){
      $('.someClass,.someClass,.someClass').addClass("iphoneX_rl");
      alert("ok iphone X - L");

    }else{
      $('.someClass,.someClass,.someClass').removeClass("iphoneX_rl");
      alert("ok iphone X - P");
    }

  }

}

navigator.userAgent.match(/(iPhone)/) if any iPhone
(screen.availHeight == 812) && (screen.availWidth == 375) if iPhone 10
((window.innerHeight == "375") && (window.innerWidth == "812")) if landscape
does your website use google maps 
Add this to landscape $('#map_section').addClass("gm_iphoneX");
class
  .gm_iphoneX div.gmnoprint{ 
   margin-right: 40px ! important; 

  }

if there is a better way to do it, or I missed something tell me 
THANKS

