tsukalogo0000

alt

iPhone用サイト

前回サイズ指定のスマートフォン対応CSSの 記述を記事にしたが今回は、その続き…
携帯電話の主役がスマートフォンに移り変わりサイト構築ではiphone(アンドロイド)やipadの対応が今後の課題になりそうな今日この頃…
ipadは画面サイズがbook並みなのでflashの閲覧不可以外、特に気にしないのだが、iphoneサイズになると見せ方に工夫がいる。メインであるtsuka-time.comサイトのトップページがPCでは左右のサイズがフリーでセンタリング表示されるのだが、相対的に小さくなってしまう。よってスマホのみ効果がある以下のメタタグを追加しサイズを固定する。

●仮想のディスプレイサイズを設定する


tsukapiko-blog

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!は、日本語対応にしているにもかかわらず、いまいち使い方解らず現在放置中~

tsukapiko-blog

●.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上でも確認が取れる。実際は本物の端末で見る事にこした事はないが…tsukapiko-blog firebugにしろ、 ダウンロードヘルパーにしろfirefoxの充実度は本当に頼もしい限りた。

tsukapiko-blog

 

コメントを追加

お名前:
メールアドレス:
Webサイト:
件名:
コメント: