OSを判定してiPhone Android Windowsごとにホームページを振り分ける　コピペOK

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

JavaScriptを利用して判定する
テスト状況

JavaScriptを利用して判定する

jqueryをCDNから読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

ユーザエージェント文字列を取得

/* ユーザーエージェントの文字列を取得 */
var useragent = window.navigator.userAgent.toLowerCase();

文字列 iphoneを検索して場合分け

if (useragent.indexOf('iphone') != -1) {

ページを飛ばす

setTimeout("location.href='move/ios.html'",0);

全体的なコードはこんな感じです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>OS判定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<h1>OS判定のテスト</h1>
    <script>
        //  jqueryが動作しているか確認するのに合わせてOS判定テストを表示
        alert($("h1").text());
    </script>

<script>

    $(function() {
        /* ユーザーエージェントの文字列を取得 */
        var useragent = window.navigator.userAgent.toLowerCase();

        /* OSごとの条件分岐 */
        if (useragent.indexOf('iphone') != -1) {
            //iPhoneに適応させたい内容
	        setTimeout("location.href='move/ios.html'",0);
        } else if (useragent.indexOf('ipad') != -1 || useragent.indexOf('macintosh') != -1) {
            //iPadに適応させたい内容
	    	setTimeout("location.href='move/ios.html'",0);
	    } else if (useragent.indexOf('win') != -1) {
            //iPadに適応させたい内容
	    	setTimeout("location.href='move/windows.html'",0);
        } else if (useragent.indexOf('android') != -1) {
            if (useragent.indexOf('mobile') != -1) {
                //Android mobaileに適応させたい内容
                setTimeout("location.href='move/android.html'",0);
	        setTimeout("location.href='move/android.html'",0);
            } else {
                //その他デバイス（Androidタブレットなど）に適応させたい内容
	        	setTimeout("location.href='move/android.html'",0);
            }
        };

    });
</script>

</body>
</html>

あとは、move階層下に、各OSごとのhtmlファイルを作成しました。

ios.html

windows.html

android.html

OSの種類にしたがって、各ページが表示されます。