iOS とAndroid の判別

2017-04-28 管理者

Contents

1 window.navigator.userAgent
2 プログラム
- 2.1 共有:

スマートフォンのOS が、iOS かAndroid かをプログラムで判別します。
OS を判別するプログラムは、OS に依存するプログラムを作る際に、必要になります。

（注）OS に依存するプログラム
OS が異なることで、動作が異なるプログラム

window.navigator.userAgent

userAgent は、使用しているコンピュータ種別やブラウザなどを特定する情報です。

Web サイトにアクセスする際には、相手Webサイトに、HTTP のuserAgent ヘッダとして送信します^【1】。

userAgent の中身の項目は以下となります^【2】。

userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version

ここで、userAgent の項目の中に、「OS-or-CPU」があることが分かります。

また、userAgent の使い方は、以下となります^【2】。

var ua = window.navigator.userAgent;

【参照1】Wikipedia: ユーザーエージェント

【参照2】MDN: window.navigator.userAgent

userAgent の具体例

userAgent の具体例をいくつか見てみます。

iPhone の場合

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X)
AppleWebKit/601.x.x (KHTML, like Gecho) GSA/x.x.x
Mobile Safari/601.x

Android スマホの場合

Mozilla/5.0 (Linux; Android5.1.1; KFFOWI)
AppleWebKit/537.x (KHTML, like Gecko) Silk/57.x.x like
Chrome/57.x.x Safari/537.x

iPhone の場合、userAgent 中に文字列「iPhone」があります。
Android スマホの場合、userAgent 中に文字列「Android」があります。

iOS かAndsroid かの判別方法

Web アプリが動くコンピュータのOS が、iOS かAndroid かを判別するには、userAgent 中の特定な文字列の有無を判別すればよいことが分かります。

userAgent 中に以下の文字列があることで、各OS を判別します。

iOS　　：文字列「iPhone」もしくは「iPad」、「iPod」
Android：文字列「Android」

プログラム

プログラム1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iOS_or_Android</title>
<script>
    var os_name;          // iOS, Android

    window.onload = function() {
        var ele = document.getElementById("output");
    //
        var ua = navigator.userAgent;
        if (ua.match(/Android/)) {
            os_name = "Android";
        } else if (ua.match(/iPhone|iPad|iPod/)){
            os_name = "iOS";
        } else {
            os_name = "unknown";
        }
        ele.innerHTML = "OS = " + os_name;
    }
</script>
</head>
<body>
    <output id="output"></output>
</body>
</html>