各社webサイトのマルチディバイス対応を検証

はじめに

http://www.doya-doya.com/inspiration/2011/06/02/6787

上記サイトを参考に各社webサイトのマルチディバイス対応について調べてみた

株式会社クライマークス

http://www.climarks.com/

ディバイス対応
※メディアクエリで950px以下の場合にサイドメニューをページ上部に配置してタブレットに最適化する
判定方法
・タブレット判定は画面サイズ(950px以下)
URL

PCとスマートフォンは別URL

ソース
・スマートフォンがXHTMLなのは謎。。。

日本コカ・コーラ

http://www.cocacola.co.jp/

ディバイス対応
判定方法
URL

PCとスマートフォンが同じ

ソース

HTML5

・スマートフォンで不用な要素はStyleでdisplay:none
・画像などのディバイス依存のコンテンツはJSで動的に取得

まとめ

ほかのサイト等も確認しての結果

  • 判定：
スマートフォンはUA判定、タブレットは画面サイズ判定
  • フォント：
PCのフォントは12px、スマートフォンのフォントは7~8px程度
  • URL：
URLはPCとスマートフォンで別で用意し、フロントやサーバ側でUA判定でリダイレクト
  • Responsive Design
参考サイトで実現できているサイトはなし(クライ・マークスとコカ・コーラがほしい)