前回サイズ指定のスマートフォン対応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の充実度は本当に頼もしい限りた。

@media only screen and (max-device-width: 480px){
.任意のclass {
iphoneサイズ用CSS指示
}
} 
↑maxは480pxより小さい場合にスタイルが適用されるという事

@media only screen and (max-device-width: 1024px){
.任意のclass {
ipadサイズサイズ用CSS指示
}
}
↑maxは1024pxより小さい場合にスタイルが適用されるという事
※オレンジ文字は通常のCSSを入れ込む

色の差し替えはもちろん、画像の入れ替えやdispleynoneで要素を消し去る事も可能だ。もともとスマホではちまちましたギミックや小技は演出しなくていいので、細かいindex用gifアニメも消去しました。これで見事にメインビジュアルは静止画に、その他細かい素材は消去してスッキリバグも無しという感じです（以下に詳細があります）
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
→http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

要は、flashを付けた時にswf読み込めないブラウザではjpg画像に入れ替えるのと同じ要領です。
ついでにadbeflashについてこんな記事が…。

	Steveの哄笑が聞こえる–Adobeが モバイルデバイス用のFlashを断念 by MG Siegler on 2011年11月9日

【抄訳】
それは2008年のことだった。あるモバイル関連のイベントでぼくは討論会に招待され、業界の主立った企業の人たちと席を共にした。その一人が、 Adobeから来た紳士だった。その前年にiPhoneが出たが、Flashのサポートがないことが、大きな話題になった。怒る人のほうが、多かった。そ の討論会にも、怒れる人が何人かいた。Adobeから来た男は、みんなに確言した: モバイルのFlashはもうすぐ出ます。すばらしいできばえになるでしょう。Appleがパフォーマンスを理由にiPhoneに乗せないのは、ばかげてい ます。

Adobeは、2009年にも同じことを言った。
2010年にも言った。
2011年になっても、まだ言っていた。

Adobeが、モバイル用のFlashプレーヤーの開発をやめる、というニュースを今夜（米国時間11/8）読んだとき、ぼくは不謹慎ながら、思わずニ ターッと笑ってしまった。それは、ZDNetに載ったJason Perlowのスクープ記事だった。こんな発表が、Adobeからあるらしい:
モバイルデバイス上のFlashの今後の力点は、Flashデベロッパが、すべての主要なアプリストア向けのネイティブアプリに、Adobe AIRをパッケージできるようにすることに置かれる。モバイルデバイス用のFlash Playerを新しいブラウザや、OSの新バージョン、あるいはデバイスの新しい構成に向けて適応させる作業は、今後行わない。弊社のソースコードをライ センスされている一部の者は、作業を続行し、独自の実装をリリースしてもよい。現在のAndroidとPlayBookの構成に対しては弊社がサポートを 続行し、重要なバグフィクスやセキュリティアップデートを提供していく。
この声明には、HTML5への注力も言及されていて、Perlowによれば発表は明日（米国時間11/9）あたりらしい。Adobeは、モバイルデバイス上にFlashを載せる努力を、終わらせるのだ。
これまで3年あまりも、モバイルFlashはもうすぐ出る、もうじき完成する、と言い続けていたのだから、これはおかしい。やっと2010年6月にAndroid用が出たが、完成にはほど遠かった。もっとあっさり言えば、ひでぇものだった。
【中略】
2010年の4月には、Steve JobsがAppleのWebサイトでFlashに最後通牒を突きつけた。Thoughts on Flashというシンプルなタイトルの記事でJobs は、Flashという技術を、わずか1700語そこらで破壊した。とくに痛烈な2点は、(1)Flashはモバイルデバイス上でまともに動いたことがな い、(2)Adobeは2009年以降、年に何度も、出す出すと言ってて結局出さないオオカミ少年だ。今や、誰も本気にしない。
【中略】
Steveが、天国で大笑いしている声が、聞こえる。
[原文へ][jpTechCrunch最新記事サムネイル集]
[米TechCrunch最新記事サムネイル集]（翻訳：iwatani(a.k.a. hiwa)）

そうこうしてるうちにｉＯＳ5.0.1修正版届けられましたね♪