前回サイズ指定のスマートフォン対応CSSの
記述を記事にしたが今回は、その続き…

携帯電話の主役がスマートフォンに
移り変わりサイト構築では
iphone（アンドロイド）やipadの対応が
今後の課題になりそうな今日この頃…

ipadは画面サイズがbook並みなので
flashの閲覧不可以外、特に気にしないのだが、
iphoneサイズになると見せ方に工夫がいる。
メインであるtsuka-time.comサイトの
トップページがPCでは左右のサイズが
フリーでセンタリング表示されるのだが、
相対的に小さくなってしまう。
よってスマホのみ効果がある以下の
メタタグを追加しサイズを固定する。

●仮想のディスプレイサイズを設定する
iPhoneではviewportのmetaタグを追加することで、 
デバイズの仮想ディスプレイサイズを指定する。
例えば<meta name="viewport" content="width=700">
を追加するとデバイスのディスプレイサイズを
700pxということで ページが表示できます。
iPhoneでサイトにアクセスした時に
やたら小さく表示されたり、
大きく表示されることが回避できる。

▲ジャストフィットさせたトップページ

又、以下の指定をすることで、デバイズサイズ（iPhone縦だと480px）にフィットさせ、
倍率も100%に固定して拡大されないようにもできます。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

●Mobile Joomla!

joomla!の場合、Mobile Joomla!という
プラグインがありこれを使うと
一瞬で本格的なスマホ画面に変わります。
ただし画像部分をバランス見ながら
テコ入れしないと見栄えが非常に悪く、
もう少し調整に時間がかかりそう。
それ以前にテキストに比重を置いている
サイトでもではないのでここまで
やる必要性に疑問はある。

一応このtsuka-time.comサイトは2カラムで
記事部分もすっきりさせている分そのままでも
スマートフォンで見れるといえば見れない事もないし～

今後は完全フルオリジナルデザイン
＆ページ立てでスマホページを
用意した方がいいかもしれないが
mobilejoomla!は、日本語対応にしている
にもかかわらず、
いまいち使い方解らず現在放置中～

●.htaccessファイルの使用
端末への自動誘導は.htaccessファイルを
つくってHTTPリダイレクトを行う。
moblejoomla!はプラグインをonのみでその辺の
作業も勝手にやってくれるが
手動でやる場合.htアクセスをさわって

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android)
RewriteRule ^$ /iphone/ [R]
と記述を追加した.htaccessファイルを
ルートディレクトリに設置することで、
http://www.tsuka-time.comにアクセスしてきた
iPhoneユーザとアンドロイドユーザを
http://www.tsuka-time.com/iphoneの
CSS3オンリーで作成した
別ページに飛ばす事になる。

●firefoxの携帯端末用シュミレーター
スマートフォンのプレビューについてfirefoxで
“User Agent Switcher”や“FireMobileSimulator”
などiPhone/iPadエミュレータのアドオンがあるので
それをダウンロードしてPC上でも確認が取れる。
実際は本物の端末で見る事にこした事はないが…
firebugにしろ、ダウンロードヘルパーにしろ
firefoxの充実度は本当に頼もしい限りた。

↑マイHPiphone・ipodコーナー

iPhone用サイト