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

2024年6月9日

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

ポイント

本記事では、

JavaScript でブラウザを判定する方法を

解説します。

簡単です。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 いま、利用しているブラウザ
2 ブラウザ判定方法
3 まとめ：ブラウザ（Edge、Chrome、Safari ）を判定する方法

いま、利用しているブラウザ

Point.

利用している
ブラウザ

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

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

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

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

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

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

ブラウザ判定方法

Point.

ブラウザ
判定方法

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

ただし、一つのブラウザに複数のキーワードが存在する場合があり（例：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>

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