キタジマタカシ 簡単な方法でやりたかったので、単純にユーザーエージェントで分岐させる方法を。
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で処理したほうが見やすいかなぁと思います。
