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」という本があるようなので、今度見てみようと思います。
(当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品をご紹介致しております。)
