angular - TypeScriptを使用してIonicでデバイスの幅と高さを取得するには?

Question

typescript を使用して ionic 2 でデバイスの幅と高さを取得しようとしています。

私が使用したイオン2の以前のバージョンでは、

window.screen.width
window.screen.height

しかし、新しいバージョンではこれは機能しません。

Type Script + ionic 2 ではどのように動作しますか?

Answer 1

これにはプラットフォーム情報を使用できます。

内部的にplatformはwindow.innerWidthand window.innerHeightbutを使用します

ディメンションがキャッシュされた値であるため、このメソッドを使用することをお勧めします。これにより、複数の高価な DOM 読み取りの可能性が減少します。

イオン 4/5

ドキュメント: https://ionicframework.com/docs/angular/platform#width-number

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

@Component({...})
export MyApp {
  constructor(platform: Platform) {
    platform.ready().then(() => {
      console.log('Width: ' + platform.width());
      console.log('Height: ' + platform.height());
    });
  }
}

イオニック 2/3

ドキュメント: https://ionicframework.com/docs/v3/api/platform/Platform/#width

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

@Component({...})
export MyApp {
  constructor(platform: Platform) {
    platform.ready().then(() => {
      console.log('Width: ' + platform.width());
      console.log('Height: ' + platform.height());
    });
  }
}

Answer 2

window.innerHeight と window.innerWidth を使用して、デバイスの高さと幅をそれぞれ取得してみてください。