typescript iPhone Xの判定とbodyタグへのクラス追加·削除を行うIonic3，Angular2 +サービス

Posted 2021-05-20

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

const iPhoneX = { height: 2436, width: 1125 };

@Injectable()
export class NotchService {

  constructor(
    private platform: Platform,
  ) {}

  init() {
    (<any>window).addEventListener('orientationchange', () => {
      console.log('orientationchange');
      this.onOrientationChanged();
    });

    this.onOrientationChanged();
  }

  private onOrientationChanged() {
    if (!this.platform.is('ios')) { return; }

    const ratio = (<any>window).devicePixelRatio || 1;
    const screen = {
      width : (<any>window).screen.width * ratio,
      height :  (<any>window).screen.height * ratio,
    };

    const isiPhoneXPortrait = screen.width === iPhoneX.width && screen.height === iPhoneX.height;
    const isiPhoneXLandscape = screen.width === iPhoneX.height && screen.height === iPhoneX.width;

    console.log(screen);
    console.log(`isiPhoneXPortrait = ${isiPhoneXPortrait}`);
    console.log(`isiPhoneXLandscape = ${isiPhoneXLandscape}`);


    if (isiPhoneXPortrait || isiPhoneXLandscape) {
      (<any>document).body.classList.add('iPhoneX');
    }

    if (isiPhoneXPortrait) {
      (<any>document).body.classList.remove('landscape');
      (<any>document).body.classList.add('portrait');
    } else if (isiPhoneXLandscape) {
      (<any>document).body.classList.remove('portrait');
      (<any>document).body.classList.add('landscape');
    }
  }
}