jQueryを使用してモバイル端末からのアクセスを判断する場合、ウィンドウの幅またはユーザーエージェント文字列(User Agent String)を検出することで判断できます。
以下は2つの方法です:
方法1: ウィンドウ幅を検出する
例
$(document).ready(function() {
// ウィンドウ幅を取得
var windowWidth = $(window).width();
// しきい値を設定します。例: 768px。実際のニーズに応じて調整
var mobileThreshold = 768;
// モバイル端末かどうかを判定
if (windowWidth < mobileThreshold) {
// モバイル端末で実行するコード
console.log("モバイル端末アクセス");
} else {
// モバイル端末以外で実行するコード
console.log("非モバイル端末アクセス");
}
});
// ウィンドウ幅を取得
var windowWidth = $(window).width();
// しきい値を設定します。例: 768px。実際のニーズに応じて調整
var mobileThreshold = 768;
// モバイル端末かどうかを判定
if (windowWidth < mobileThreshold) {
// モバイル端末で実行するコード
console.log("モバイル端末アクセス");
} else {
// モバイル端末以外で実行するコード
console.log("非モバイル端末アクセス");
}
});
試してみる »
方法2: ユーザーエージェント文字列を検出する
例
$(document).ready(function() {
// ユーザーエージェント文字列を取得
var userAgent = navigator.userAgent;
// モバイルデバイスのキーワード("Android"、"iPhone"、"iPad" など)が含まれているか判定
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
// モバイル端末で実行するコード
console.log("モバイル端末アクセス");
} else {
// モバイル端末以外で実行するコード
console.log("非モバイル端末アクセス");
}
});
// ユーザーエージェント文字列を取得
var userAgent = navigator.userAgent;
// モバイルデバイスのキーワード("Android"、"iPhone"、"iPad" など)が含まれているか判定
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
// モバイル端末で実行するコード
console.log("モバイル端末アクセス");
} else {
// モバイル端末以外で実行するコード
console.log("非モバイル端末アクセス");
}
});
試してみる »
どちらの方法を選ぶかは、具体的なニーズとプロジェクトの要件によって異なります。
ユーザーエージェント文字列の検出は100%信頼できるわけではないことに注意してください。ユーザーエージェント文字列は変更される可能性があるためです。したがって、状況に応じて適切な方法を選択してください。