iPhoneはフルブラウザなので、パソコン向けのWebサイトも問題なく
閲覧することができます。
でも、やっぱり拡大縮小などなしに、気楽に見られるほうが良いですよね。
ということで、うちのブログをiPhoneに対応した表示にしてみることに
しました。
CSSだけでの対応も考えましたが、表示される分量もコントロール
したかったので、PHPとCSSの双方で対応しています。
まず、定番ですが、iPhoneでの縮小拡大を無効にします。
まぁ、拡大できて悪いわけではないんですけれどね。
<meta name=”viewport” content=”width=480,maximum-scale=0.6667 user-scalable=no ” />
そして、iPhone用のhtmlを別途用意します。
これはMovableTypeの機能で簡単に作れますね。
通常のトップページは「index.html」ですが、モバイル用は「mobile.html」です。
このままだと、ご覧いただく方が切り分けないといけませんから、
そこでPHPの登場です。
以下の内容で「index.php」を作ります。
<?php
function load_skin($URL)
{
global $html_all;
$fp = fopen($URL, “r”);
$html = fread($fp, filesize($URL));
fclose($fp);
$html_all = $html;
}
$ua = $_SERVER[‘HTTP_USER_AGENT’];
if (preg_match(“/iPhone/”,$ua)) {
//iPhone用の処理
load_skin(“./mobile.html”);
}
// ケータイ
else if ( preg_match(“/DoCoMo/”,$ua) ||
preg_match(“/^UP\.Browser/”, $ua) ||
preg_match(“/^KDDI-/”, $ua) ||
preg_match(“/J-PHONE/”, $ua) ||
preg_match(“/Vodafone/”, $ua) ||
preg_match(“/SoftBank/”, $ua) ) {
//ケータイ用の処理
load_skin(“./mobile.html”);
}
else {
//それ以外
load_skin(“./index.html”);
}
echo $html_all;
exit();
?>
ついでといっては失礼ですが、ケータイにも簡易対応しておきました。
iPhoneと同じページですから、文字が大きすぎるかもしれません。
また、細かい判定はやってませんから、誤認識もあるかも。
このあたりはまた徐々に詰めていきたいと思います。
また、ケータイやiPhoneでの動作確認は実機だけでなく、FireFoxの
プラグイン「FireMobileSimulator」で出来て、便利です。
あとはこれまでindex.htmlがデフォルトだったので、デフォルトで
index.phpに飛んでくるように変更します。
それには「.htaccess」に以下の行を追加(変更)するだけです。
DirectoryIndex index.php index.html
これでphpのほうが優先されるようになります。
ですので、拙ブログへのアクセスは、以下のURLでお願いいたします。
http;//saramac.main.jp/blog/
もちろん、明示的にindex.htmlを指定すれば、PC側のページ固定で
閲覧できます。
まだまだページデザインは貧弱なものですが、そのあたりはぼちぼち
体裁を整えていこうかと。
そのためにはデザインも、もうちょっと勉強しなくちゃなぁ。
「iPhone Web Style」という本があるようなので、今度見てみようと思います。
