iPhone対応サイトの作り方(その2)

同じページでレイアウトのみを変更して対応する方法

iPhoneからのアクセスの場合、iPhone用CSSに自動的に切り替える

■構成しているページがhtmlの場合

javascriptを使ってスタイルシート(CSS)を切り替える方法

if(navigator.userAgent.indexOf(‘iPhone’) != -1){

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”>’);

}else {

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css”>’);

}

■構成しているページがPHPの場合(.php)

※ユーザーエージェントを取得

$is_iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);

または

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){$is_iphone = 1;}

※iPhoneなら、iPhone用のスタイルシートを出力

if($is_iphone){

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”/>’;

}else{

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css” />’;

}

なお、いずれの場合も、PCでのアクセス用のコンテンツや広告等、iPhoneでは不要なものは、

その部分を

<div class=”for-pc”>PC用アフィリエイトコード等</div>

としておき、

iPhone用のスタイルシートに

.for-pc{display:none;}

としておくことで、無駄な表示を減らすことが可能。



 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク