初めに

AngularでWebアプリを開発している時にOnsenUIのOnsPlatform.isIPhoneXでiPhone13が判定されなかった際の解決策を記載します。

実装コード

実行したコードは以下のコードです。

 if (onsPlatform.isIPhoneX()) { // iPhone X であるか否かを判定
      // <html> 要素に属性を追加（値として空文字列を設定）
      console.log(onsPlatform.isIPhoneX());
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');

iPhone13miniの場合

true

iPhone13の場合

false

どうしてだ？？

対処法

とりあえず、iPhoneの判定をどのように行っているかをonsenuiのコードを確認してみました！

key: 'isIPhoneX',
    value: function isIPhoneX() {
      return this.isIPhone() && (window.screen.width === 375 && window.screen.height === 812 || // X, XS portrait
      window.screen.width === 812 && window.screen.height === 375 || // X, XS landscape
      window.screen.width === 414 && window.screen.height === 896 || // XS Max, XR portrait
      window.screen.width === 896 && window.screen.height === 414 ||

ウィンドウのサイズから判断していることがわかりました。つまり、iPhone13用のサイズを定義すれば、サイズを判定されるはず。ということで以下のようにソースコードを変更しました。

key: 'isIPhoneX',
    value: function isIPhoneX() {
      return this.isIPhone() && (window.screen.width === 375 && window.screen.height === 812 || // X, XS portrait
      window.screen.width === 812 && window.screen.height === 375 || // X, XS landscape
      window.screen.width === 414 && window.screen.height === 896 || // XS Max, XR portrait
      window.screen.width === 896 && window.screen.height === 414 || // 12, 12 Pro
      window.screen.width === 390 && window.screen.height === 844 || // portrait
      window.screen.width === 844 && window.screen.height === 390 || // landscape
      window.screen.width === 428 && window.screen.height === 926 || // portrait
      window.screen.width === 926 && window.screen.height === 428 // landscape

実行結果

true

最後に

これから、フロントエンドやバックエンドの記事を投稿していきます。ぜひご覧ください

OnsenUIのisIPhoneXでiPhone13を判別する方法

初めに

実装コード

対処法

最後に