MediaQueries Multi-Device Template.

"ワンソース・マルチデバイス" テンプレートのスタンダードを創る。

PC、スマフォ、全対応の"ワンソース・マルチデバイス"テンプレートってあまり見ないなと思い、ちょっと頑張って開発してみました。
まだバグとかあるかもなのでβ版です。バグ見つけ次第、直していきます。

ワンソース・マルチデバイスとは？

「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。
CSS3のMediaQueriesを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画面サイズのデバイスに対応することができます。

とりあえず目標

  • スマートフォン、PC、タブレットなど、Web標準ブラウザを搭載するデバイスに最適な形でコンテンツを提供することを頑張る。
  • マルチデバイス対応案件における、開発、運用のハードルや負荷を下げる。
  • 極力、ユーザーエージェント判別による振り分けはしない。
メリット
CSSのみで対応できる。
JavaScriptができなくても、マークアップのみで対応できる。
MediaQueriesはウィンドウの横幅でCSSを切り替えるため、未知のデバイスも考慮できる。
デメリット
複雑なレイアウト、コンテンツの出し分けは難しい。
MediaQueriesでのCSS切り替えによるコーディングの取得が必要。

動作検証端末

Windows Mac
Internet Explorer 7 以上
Firefox3.6 以上
Safari5 以上
Opera11 以上
Google Chrome
iOS4.3 以上
iPhone3GS
iPhone4
iPad
iPad2
Android2.1 以上
Xperia (Android2.1)
GalaxyS (Android2.2)
NexusS (Android2.3)
WindowsPhone7.5以上
TOSHIBA IS12T (MSIE9)
  • ※IE6は一応見れます。
  • ※WindowsPhone7.5以上でMSIE9ベースであればメディアクエリ使えます。
  • ※ガラケーは対象外です。

更新履歴

2011/10/29
スペルミスなど調整。
2011/09/16
ver 0.1β をリリースしました。

Copyright © funnythingz