javascriptでUAを取得してphpで処理する。

電脳備忘録

需要がなさそうですが、javascriptでUAを取得してajaxでphpに値を渡し、phpで処理して戻すコード。

最近のiOSはPHPでiPadの判別できないのでjavascriptでモバイル(iPod、iPhone、iPad、Android)とそれ以外(PC)に分けて値をPHPに値を渡して処理して戻すコードを書いたのですが、よくよく考えたらJavascriptのみで対応できることが分かったので結局お蔵入り・・・。

PHPで処理することに固執して迷走したなんて言えない・・・とはいえなんかの時に使う機会があるかもしれないので残しておきます。

<script>
const ua = window.navigator.userAgent.toLowerCase();
const isMobile = ua.indexOf("iphone") >= 0 
|| ua.indexOf("ipad") >= 0 
|| (ua.indexOf('macintosh') > -1 && 'ontouchend' in document) /* iPad */
|| ua.indexOf("ipod") >= 0
|| ua.indexOf("android") >= 0;
// XMLHttpRequestオブジェクトを作成
var xhr = new XMLHttpRequest();
// POSTリクエストを作成し、process.phpに送信
xhr.open('POST', 'process.php', true);
// リクエストのContent-Typeを設定
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// レスポンスが返ってきた時の処理
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // レスポンスをコンソールに表示
var response = xhr.responseText;
console.log(response);
if (response.trim() === 'pc') {
//PC
} else {
//モバイル
}
}
}
</script>

process.phpの内容

<?php
// mobile パラメータを取得
$mobile = $_POST['mobile'];
// モバイルかPCかを判定
if ($mobile === 'true') {
// モバイルの場合の処理
$response = 'mobile';
} else {
// PCの場合の処理
$response = 'pc';
}
// レスポンスを出力
echo $response;
?>

上記のような小難しいことをしなくても結局これで何とかなりました。
モバイル(iPod、iPhone、iPad、Android)だったらtrue、それ以外(PC)だったらfalseが変数isMobileに格納されるのでその値を元に分岐処理します。

const ua = window.navigator.userAgent.toLowerCase();
const isMobile = ua.indexOf("iphone") >= 0 
|| ua.indexOf("ipad") >= 0 
|| (ua.indexOf('macintosh') > -1 && 'ontouchend' in document) /* iPad */
|| ua.indexOf("ipod") >= 0
|| ua.indexOf("android") >= 0;
console.log(isMobile); 
if (isMobile === true) {
//モバイル
} else {
//PC
}//end if
Newer
Older
Dark
Light
menu