CSS Nite LP, Disk 16フォローアップ（7）高津戸 壮さん（ピクセルグリッド） | CSS Nite公式サイト

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『Android向けサイト制作のあれこれ：viewportについて』のスライド、音声を公開します。

• スライド（※2011年6月現在、Safariでのみ正常に閲覧できます）
• 音声（MP3、46:01）

LP16にご参加いただき、ありがとうございました。

私のセッションは、viewportについてという、まぁかなり地味な内容でしたが、スマートフォン向けのサイト制作に携わっている方にとっては必須とも言える内容です。今後スマートフォンサイトを制作する方、現在制作を行っている方には、是非復習し、ご理解いただければ幸いです。

セッションの中でお伝えしきれなかった点について、いくつか補足させて頂きます。

セッション終了時に鷹野さんよりご質問いただいた、iPhoneは640pxの解像度なのではないか？という点ですが、これについては、Androidの最近の端末にも同様、320px以上の解像度を持つ端末が多く存在します。しかし、そのような端末につきましても、ブラウザのdevice-widthは、デフォルトで320pxになるように調節されます。

これが、viewportを理解する上で非常に難解な部分なのですが、スマートフォンにおいて、1pxは1pxではないのです。iPhone, IS03などの解像度640×?のデバイスは、2pxを使ってブラウザ上の1pxを描画します。また最近のAndroid端末（Xperia Arc等）は、解像度480×?ですが、この場合、1.5pxを使って1pxを描画します。

なぜこのようになっているのでしょうか？それは、端末の解像度にぴったり合わせていると、とてつもなくサイトが小さく見えてしまうためです。このような問題を解決するため、スマートフォンは、1pxの密度というものが設定されています。ややこしい話ですが、このおかげで、スマートフォン向けサイトでは、常に320pxをベースに作ることで、クロスデバイスの問題を解決しています。これは、アプリでも同じような仕組みになっているようです。

※ちなみに、タブレットの場合はこれとは別扱いで、device-widthはもっと広くなります

スライドを見直し、是非、ご自身の制作に活かしていただければと思います。