iPhone や Android 向けのWEBサイトを作成する際に、
色々と困ることがあります
特にモバイルによって画面サイズが異なりますが、
どうやってデザインすればよいのでしょうか
■デザインする際のポイント
●モバイル機器の画面サイズのデファクト・スタンダードは、
320x480 で作成する。
●画面サイズはデスクトップに影響させず、モバイル・ユーザーのみ
対応するために、下記メタタグを使用する。
<meta name="viewport" content="width=device-width" />
※メタタグを組み込んだページは、モバイル機器に合わせた適切な
スケールに調整されます。
●特定のスケールを設定は、viewportメタタグのcontent属性の
initial-scaleを1.0 から 1.3 までの間に設定する。
例)<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />
※initial-scale の値を変更することで、画面を必要に応じて
ズームインしたり、ズームアウトしたりすることができます。
●スタイルシートとメディア・クエリーを使うことによって、
クライアント・ブラウザー間の違いに簡単に対応する。
※メディアクエリーは、link要素のmedia属性やCSSの@mediaを
拡張したもので、デバイスの条件を指定しスタイルシートを
適用可能にする技術です。
たとえば、「幅が1280pxなディスプレイ」と
「幅が1600pxなディスプレイ」で、異なるスタイルを
割り当てることができます。
■参考サイト
・Android と iPhone のブラウザー戦争: 第 1 回 WebKit による救いの手
・小型携帯端末向けスタイルの分岐方法(CSS 3 Media Queries)
・メディアクエリー(2010 年 7 月 27 日付 W3C 勧告候補)