How To Write Scss Only For IphoneX In Ionic 4

To write scss for iPhone X, iPhone 6, 6s, 7,8, and many more devices, for that we should apply a class according to device width and height. we declare a variable in  app.components.ts file and then initialize in initializeApp() function.

declare var window;

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.backgroundColorByName("black");

      var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      var ratio = window.devicePixelRatio || 1;
      var screen = {
        width: window.screen.width * ratio,
        height: window.screen.height * ratio
      };



      //  for iPhone X (375x812)
      if (iOS && screen.width == 1125 && screen.height == 2436) {
        document.querySelector("ion-app").className = document.querySelector("ion-app").className + " iphonex";
      }

      //  for iPhone 6 plus ,6s plus,7 plus, 8 plus   (414x736)
      if (iOS && screen.width == 1080 && screen.height == 1920) {
        document.querySelector("ion-app").className = document.querySelector("ion-app").className + " plus";
      }

      //  for iPhone 6,6s,7,8  (375x667)
      if (iOS && screen.width == 750 && screen.height == 1334) {
        document.querySelector("ion-app").className = document.querySelector("ion-app").className + " iphone-6-7-8";
      }

      //  for iPhone5, iphone5S  
      if (iOS && screen.width == 640 && screen.height == 1136) {
        document.querySelector("ion-app").className = document.querySelector("ion-app").className + " iphone5";
      }

      //  for ipad pro (1024x1366)
      if (iOS && screen.width == 2048 && screen.height == 2732) {
        document.querySelector("ion-app").className = document.querySelector("ion-app").className + " ipadpro";
      }

      //  for ipad iPad Mini4 , iPad Air 2, iPad Pro (9.7-inch)  (1024x768)
      if (iOS && screen.width == 1536 && screen.height == 2048) {
        document.querySelector("ion-app").className = document.querySelector("ion-app").className + " ipadmini";
      }



    });
  }