レスポンシブ・ウェブデザインの Media Queries の設定と15px

レスポンシブ・ウェブデザインで大きなポイントとなるのが、メディアクエリのサイズの設定です。以前に「mediaqueries」に掲載されているウェブサイトの メディアクエリのサイズを調査したことがありましたが、今回は メディアクエリのサイズの設定について詳しく紹介したいと思います。

メディアクエリのサイズ

メディアクエリのサイズですが、

• 
  800px –ネットブック、Nexus One、Dell Streak などのサイズ。
  
• 
  600px – タブレット端末、例えば SamuSung ギャラクシー、Blackberry Playbook。iPhone 4 のポートレートのサイズは少し大きい 640pxなので、800pxのスタイルシートが iPhone4 のポートレートでは適用される。
  
• 
  480px – スマートフォンでは一般的なサイズ、3GS以下のiPhone のポートレートモードもこのサイズ。
  
• 
  320px – iPhone 3GS 以下の ポートレートのサイズ
  

CSSソース

下記が参考までに レスポンシブ・ウェブデザインを実現するための記述です。

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {

}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {

}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {

}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {

}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {

}

上記の記述をみて「あれ！」と思った人は鋭いです！

なぜサイズが20px大きいか？

上記の CSSのソースを見てみると、すべてサイズが20px大きいのに気づくとおもいます。これは Webkit つまり iOS と Android の殆どのモバイル用のブラウザへのバグへの対応です。Webkit は垂直のスクロールバーの横幅のサイズ（約15px）をウィンドウサイズに含めないのです。これは、Webkitのバグで OperaやFirefox ではウィンドウサイズとしてではなく実装されています。（仕様書上は、ウィンドウサイズに含まれる。）その分、15px から 20px を大きめにメディアクエリーのサイズとして指定しているのです。

このスクロールバーの横幅が約15px

まとめ

レスポンシブ・ウェブデザインでは、メディアクエリのサイズ指定が大きなポイントになります。上記に紹介したサイズ以外にも適したサイズがあるかもしれません。例えば スマートTV向けにデザインをすることも今後や必要になるでしょう。そのときは、1600px以上をターゲットにすればいいのです。
今後は、レスポンシブ・ウェブデザインの奥深い部分にも焦点をあてていきたいと思います。

参考記事：
http://www.456bereastreet.com/archive/201101/media_queries_viewport_width_scrollbars_and_webkit_browsers/