Home > ブログ > JavaScriptでmacOSとiPadOSを識別する

ブログ

JavaScriptでmacOSとiPadOSを識別する

2019年秋にリリース予定のiOS13ですがiPadではiOSとは別のiPadOSが使われるようになります。このiPadOS上のSafariではユーザエージェントが大きく変更されて、macOS上のSafariと見分けがつかなくなってしまいました。今回はWebアプリケーション内でiPadOSを識別するための方法を説明します。

注意: 今回はWebアプリケーション(html5/javascriptで構築したアプリ)に関する話でネイティブアプリには関係ありません。また、サーバー側での判定ではなくクライアント側(JavaScript)での判定の話になります。

電子カタログ等のWebアプリケーションを開発しているとブラウザやプラットフォームの種類を判定して処理を分けたいケースがよくあります。

上に書いたとおり、iPadOS上のSafariはユーザエージェントがMacのSafariと同じになっており、ユーザエージェントからは判断できなくなっています(ユーザエージェント文字列の例は以下参照)。

参考: iPhone,iPad,Mac上の各種ブラウザのユーザエージェント

[Safari on iPhone + iOS13]
Mozilla/5.0 (iPhone; CPU iPhone OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1

[Safari on iPad + iOS12]
Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

[Safari on iPad + iPadOS]
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15

[Safari on macOS Mojave]
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15

[Chrome on macOS Mojave]
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

[Firefox on macOS Mojave]
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0

[Safari on iPad + iPadOS]と[Safari on macOS Mojave]のユーザエージェントを比較すると、バージョン番号の細かい違いはありますが、基本的に同じ内容になっているのがわかります。

iPadはIntelじゃなくてARMでは?という気もしますがAppleとしてはiPadOSはmacOSと同じように見せたい(扱わせたい)ということなのかもしれません。

以上からユーザーエージェントによる判定は無理そうなので、別の手段を考えます。

ブラウザにはwindow.navigator.platformというオブジェクトがあり、これでプラットフォームを識別することができるかもと思いましたが、navigator.platformの値は表1のとおりになっていました。

表1 ブラウザごとのnavigator.platformの値

Platform OS Browser navigator.platform値
iPhone iOS13 Safari iPhone
iPad iOS12 Safari iPad
iPad iPadOS Safari MacIntel
Mac macOS Mojave Safari,Chrome,Firefox MacIntel

iOS12まではiPadのnavigator.platformは"iPad"でしたが、iPadOSのSafariのnavigator.platformは"MacIntel"となっており、こちらもmacOSのSafariと区別が付きません。

結局、iPadOSのSafariにあってmacOSのSafariに存在しない機能/プロパティを利用するしかなさそうだったので、探したところnavigator.standaloneが使えそうでした。

navigator.standaloneとはWebページがフルスクリーンモードで表示されているかを示すプロパティで、macOSのSafariには存在しません(undefinedになる)。

ということで以下のような判定処理にしました。

macOS上のSafariかiPadOS上のSafariか判定するJavaScriptコード例

if (navigator.platform == "MacIntel" &&
    navigator.userAgent.indexOf("Safari") != -1 &&
    navigator.userAgent.indexOf("Chrome") == -1) {
  if (navigator.standalone !== undefined) {
    // iPad OS Safari
  } else {
    // macOS Safari
  }
}

一応これでWebアプリケーション内で処理を分けることができます。

もっとスマートな方法を見つけたら更新していきます。

[補足]
以上から〜iOS12およびiPadOSを含むiPad判定は以下のようになります。

iPad判定処理

if (navigator.platform == "iPad" ||        // -iOS12
    (navigator.platform == "MacIntel" &&   // iPadOS
     navigator.userAgent.indexOf("Safari") != -1 &&
     navigator.userAgent.indexOf("Chrome") == -1 &&
     navigator.standalone !== undefined)) {
  // iPad
}

2019.9.8 一部誤記を修正(IntelMac→MacIntel)。

投稿日:2019/08/20 13:56

タグ: JavaScript Webアプリ

Top

アーカイブ

タグ

作業実績 (9) Server (8) PHP (4) Linux (4) Webアプリ (4) C++ (3) laravel (3) EC-CUBE (2) JavaScript (2) Nginx (2) Vue.js (2) AWS (1) CreateJS (1) デモ (1) 書籍 (1)

技術的な情報は以下にもあります。