Android Media Query サイズ再考

　先週、Android バージョンのアプリがリリースする予定でしたが、横向きを追加すべきとの観点が顧客から出てきました。phone サイズだと、横向きがの高さが本当に小さいから、それに加えて私たちのアプリにヘッダとフッターがあるから、いっそう立て幅が小さくなります。。。
　ただ、ユーザがより多くのコンテンツを読みたいことが予想できますので、今月中のリリースに向けて、着々アプリの修正が進んでいます。その中に、私メインで作った天気ページは縦方向しか対応してないため、横になると、字がかぶったり、位置がずれたりしています。対応が必要です。
　私たちの Phone サイズテスト機は Nexus 5となっています。実際使って見ると、なんと、WebView の横幅は 800 px もあります。。。一般的な Tablet は 1024 となっていますが、接近していますね。。。何とも言えないけど。。。
　それで、480px 以下だと、phone レイアウトを表示するとか、下記の一般的な表があります。
    Phone width =< 480px,   Tablet 480px < width =< 1024px,  Desktop > 1024px
　iPhone 5や、Nexus 5がリリースされると、上記のサイズは実際とあわないことになりました。
　それで、多分上記の分け方に問題があるような気がしています。なぜなら、Android ではタブレットのサイズが違いすぎるためです。今まで見たアンドロイドタブレットの中に、1024x360 のものもあります。縦になると、実は Phone と変わらない横幅です。
　多分、これから開発するとき、Responsive デザインを実装する時、Phone サイズなどの分類を考えずに、直接デバイスのサイズを考えたほうが良さそうです。
　まず、>= 1024px、これは大きいサイズのタブレットとデスクトップ。
　次 < 1024px、これは普通のタブレットサイズ。
　さらに、< 480px、これは小さいデバイス。
　これで、まず全部の要素をできるだけパーセンティジで定義して、全部の要素をブラウザリサイズするとき、隠さないようにします。次、画面のサイズにあわせて、Media Query を使って、個別要素のサイズを調整します。
　注意点としては、位置が Absolute の要素に対して、たまに他の要素とかぶったりします。どの親と一緒かをはっきり設定しなければなりません。BEM、スマックスなどの Methodologies を参考にすれば、面白いでしょう。
　もし、CSS では難しいであれば、背景画像を使いましょう。小さい画像なら、base64 でエンコードして、CSS に入れれば、余計な HTTP Request なしで済むから、便利でしょう。
　ほんの小さい考えですが、デザイナにインプットして、使いやすいアプリになりますように。
　それでは。