【WordPress】JavaScript でブラウザ（Edge、Chrome、Safari ）を判定する方法

ブラウザによっては特定の CSS の動きが違う（動かない）など特徴があります。ブラウザごとに表示や動作を分ける必要がある場合、利用しているブラウザを判定する必要がありますね。

本記事では、JavaScript でブラウザを判定する方法を解説します。簡単です。

いま、利用しているブラウザを確認する

インターネットでホームページにアクセスした際、ブラウザ（クライアント）は、ホームページ（サーバー）に対して自分が何者か（自分が使っているブラウザ）情報を送信しています。

送信している情報を ユーザーエージェント（UserAgent ：略して UA）と言います。

ユーザーエージェントは JavaScript で取得することが可能です。あなたのブラウザのユーザーエージェント情報を表示します。

今使っているブラウザから送信されているユーザーエージェントはこちら

今使っているブラウザはこちら

※実際は Edge でも Chrome と判断される場合があります。

ブラウザ判定方法

ブラウザを判定するには、ユーザーエージェントの中にある文字を比較します。

ただし、一つのブラウザに複数のキーワードが存在する場合があり（例：chrome は「chrome」と「safari」の２単語が同時に存在する）、順番に見ていく必要があります。

ブラウザを判定する JavaScript サンプル

<script>
    function getBrowser() {
        const userAgent = window.navigator.userAgent.toLowerCase();
        let browserName = "不明なブラウザ";

        if (userAgent.indexOf("firefox") > -1) {
            browserName = "Firefox";
        } else if (userAgent.indexOf("opera") > -1 || userAgent.indexOf("opr") > -1) {
            browserName = "Opera";
        } else if (userAgent.indexOf("trident") > -1) {
            browserName = "Internet Explorer";
        } else if (userAgent.indexOf("edge") > -1) {
            browserName = "Microsoft Edge";
        } else if (userAgent.indexOf("chrome") > -1) {
            browserName = "Google Chrome";
        } else if (userAgent.indexOf("safari") > -1) {
            browserName = "Safari";
        }

        return browserName;
    }
</script>

なお、ユーザーエージェントはブラウザを作る会社が指定しているので将来にわたって保証されるものではありません。利用者がブラウザのユーザーエージェントを改ざんすることもできるため、必ずではないという点にはご注意ください。

まとめ：ブラウザ（Edge、Chrome、Safari ）を判定する方法

ブラウザを判定するためには、ユーザーエージェントの中にある文字を比較します。

簡単ですね。