<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>
body {
  background-color:white;
  &:after { content:"No iPhone X detected"; position:fixed; z-index:1; width:100%; left:0; text-align:center; top:50%; font-size:30px; font-family:Arial; }
  &.iphoneX {
    &:after { content:"iPhone X detected!"; color:white; font-weight:bold; }
    &:before { content:""; width:100px; height:100vh; position:absolute; top:0; }
    background-color:#7FBEF8;
    &.notch-left:before { background-color:red; left:0;}
    &.notch-right:before { background-color:green; right:0; }
  }
}
View Compiled
    (function(window){

      // Really basic check for the ios platform
      // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
      var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

      // Get the device pixel ratio
      var ratio = window.devicePixelRatio || 1;

      // Define the users device screen dimensions
      var screen = {
        width : window.screen.width * ratio,
        height : window.screen.height * ratio
      };

      // iPhone X Detection
      if (iOS && screen.width == 1125 && screen.height === 2436) {

        // Set a global variable now we've determined the iPhoneX is true
        window.iphoneX = true;

        // Adds a listener for ios devices that checks for orientation changes.
        window.addEventListener('orientationchange', update);
        update();
      }

      // Each time the device orientation changes, run this update function
      function update() {
        notch();
        iphoneXChecker();
      }

      // Notch position checker
      function notch() {

        var _notch = '';

        if( 'orientation' in window ) {
          // Mobile
          if (window.orientation == 90) {
            _notch = 'left';
          } else if (window.orientation == -90) {
            _notch = 'right';
          }
        } else if ( 'orientation' in window.screen ) {
          // Webkit
          if( screen.orientation.type === 'landscape-primary') {
            _notch = 'left';
          } else if( screen.orientation.type === 'landscape-secondary') {
            _notch = 'right';
          }
        } else if( 'mozOrientation' in window.screen ) {
          // Firefox
          if( screen.mozOrientation === 'landscape-primary') {
            _notch = 'left';
          } else if( screen.mozOrientation === 'landscape-secondary') {
            _notch = 'right';
          }
        }

        window.notch = _notch;
      }

    })(window);

    // Bespoke functions:
    // The above functions have no jQuery Dependencies.
    // The below code uses jQuery solely for this quick demo.
    if ( window.iphoneX === true ) {
      $('body').addClass('iphoneX');
    }
    function iphoneXChecker() {
      if (window.notch == 'left') {
        $('body').removeClass('notch-right').addClass('notch-left');
      } else if (window.notch == 'right') {
        $('body').removeClass('notch-left').addClass('notch-right');
      } else {
        $('body').removeClass('notch-right notch-left');
      }
    }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js