みなさんこんにちは、gazzaです。

最近案件でコーディングばかりやっているので
デザインをたまにすると楽しい今日この頃です。

今回はスマートフォンの初期のレイアウト調整に関して
書きたいと思います。

恐らく今後ものすごいスピードで進化をするジャンルだと思いますので
対応方法も次々と編み出されると思いますが、現状の対応策と
してご紹介させて頂きます。

スマートフォンもガラケーと同じく仕様（解像度・devicePixelRatio等）が
統一されていないためどこまで対応するかが制作者にとっては悩みの種になります。
初期のレイアウトはなるべく同じ見栄えにしたいので現状は下記のようなフローで
作成しています。

1.必須の機種を下記の点に注意しなるべく多く同じレイアウトで網羅できる仕様で作成
　・デザイン時からCSS3で実装可能なものを考慮してデザイン
　・リキッドレイアウトでコーディング
　・なるべく画像はCSS3で代用し、画像は高解像度の物に合わせる
　
2.「1」の仕様で作成しても、初期のレイアウトが合わないものに関しては下記の
　jsの振り分けで調整する。「機種01」「機種02」のviewportの値を個別に読み込ませて
　「機種01」「機種02」のみレイアウトの調整を行っています。
　
if (navigator.userAgent.indexOf('機種01のUA名') != -1) {
    document.write('機種01用のviewportのコード');
} else if (navigator.userAgent.indexOf('機種02のUA名') != -1) {
    document.write('機種02用のviewportのコード');
}

仕様によっては他にもいろいろな方法があると思いますので、また
ご紹介いたしますね。