iPhone、iPad、iPodを判別する方法

簡単な方法でやりたかったので、単純にユーザーエージェントで分岐させる方法を。

PHPの場合

まず下記のような関数を定義します。

/* iPhoneの場合 */
function is_iphone () {
	$_ret = false;
	if ( preg_match( '/iPhone/i', $_SERVER['HTTP_USER_AGENT'] ) ) {
		$_ret = true;
	}
	return $_ret;
}
/* iPadの場合 */
function is_ipad () {
	$_ret = false;
	if ( preg_match( '/iPad/i', $_SERVER['HTTP_USER_AGENT'] ) ) {
		$_ret = true;
	}
	return $_ret;
}
/* iPodの場合 */
function is_ipod () {
	$_ret = false;
	if ( preg_match( '/iPod/i', $_SERVER['HTTP_USER_AGENT'] ) ) {
		$_ret = true;
	}
	return $_ret;
}
/* iphone, ipad, ipodいずれかの場合 */
function is_ios () {
	$_ret = false;
	if ( is_iphone() || is_ipad() || is_ipod() ) {
		$_ret = true;
	}
	return $_ret;
}

iPhoneにだけCSSを適用したい場合は下記のような感じで。

<head>
<?php if ( is_iphone() ) : ?>
<link rel="stylesheet" type="text/css" href="css/iphone.css" />
<?php endif; ?>
</head>

JavaScriptの場合

PHPが使えない環境の場合はJavaScriptを利用します。まず下記のような関数を定義します。

/* iPhoneの場合 */
function is_iphone () {
	var _ret = false;
	if ( navigator.userAgent.match( /iPhone/i ) ) {
		_ret = true;
	}
	return _ret;
}
/* iPadの場合 */
function is_ipad () {
	var _ret = false;
	if ( navigator.userAgent.match( /iPad/i ) ) {
		_ret = true;
	}
	return _ret;
}
/* iPodの場合 */
function is_ipod () {
	var _ret = false;
	if ( navigator.userAgent.match( /iPod/i ) ) {
		_ret = true;
	}
	return _ret;
}
/* iphone, ipad, ipodいずれかの場合 */
function is_ios () {
	var _ret = false;
	if ( is_iphone() || is_ipad() || is_ipod() ) {
		_ret = true;
	}
	return _ret;
}

iPhoneにだけCSSを適用する場合だと下記のような感じです。head要素の末尾にappendでlinkタグを追加します。記述を簡単にするためjQueryを使用しています。

/* 要jQuery */
$(function(){
	if ( is_iphone() ) {
		$('head').append( '<link rel="stylesheet" type="text/css" href="css/iphone.css" />' );
	}
});

JavaScriptを使った記述だと冗長になるのと、JS内にlinkタグを記述しないといけないのが気持ち悪い。PHPのほうはHTML内に分岐処理を記述できるので直感的。個人的にはPHPで処理したほうが見やすいかなぁと思います。

  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。