ふと気になったので整理します。
Android 4.3 から…
xxxhdpi が追加されているみたいです。
- ldpi: 120 ppi (0.75)
- mdpi: 160 ppi (1.00)
- tvdpi: 213 ppi (1.33)
- hdpi: 240 ppi (1.50)
- xhdpi: 320 ppi (2.00)
- xxhdpi: 480 ppi (3.00)
- xxxhdpi: 640 ppi (4.00)
のようになっています。すごいですね… 複雑
Web サイトの設計
もしあなたが Web サイト設計者なら、もし海外も視野に入れているなら、上記のとおり、0.75～4.00 まで対応すればいいでしょう。具体的には
320 px レイアウト (俗に iPhone 系)
- 0.75 (240x320, QVGA) ☆
- 1.00 (320x480, HVGA) ☆
- 1.50 (480x640, VGA; 480x854, FWXGA) ☆
- 2.00 (640x960; 640x1136)
360 px レイアウト (俗に一般系)
- 1.50 (540x960, qHD) ☆
- 2.00 (720x1280, HD)
- 3.00 (1080x1920, FHD)
- 4.00 (1440x2560, WQHD) ☆
タブレット系
- 1.00 (720x1280, HD; 768x1024, XGA)
- 1.33 (800x1280, WXGA) ☆
- 1.50 (800x1280, WXGA) ☆
- 2.00 (1536x2048, QXGA)
タブレット系は難しいです。これ以外にもいろいろあるかと思います。1.33x WXGA は Nexus 7、1.50x WXGA は Kindle Fire HD です。どちらも 7-inch タブレット。これ以外にもあると思いますが、まあこれの縦横レイアウト考慮すればかなりいいと思います。難しいですが…
PC 系
Windows では基本的に 1.00 (96 ppi)、1.25 (120 ppi)、1.50 (144 ppi)、2.00 (192 ppi) があると思っていいです。ストア アプリでは別系統でのスケーリングですが、ストア アプリの IE はこれと同系列で拡大します。Microsoft ではなくメーカー製 PC が勝手にいじっている場合がありますが、これは調査範疇の外とします。
- 1.00
- 1.25
- 1.50
- 2.00
PC 系でもスケーリングは考慮すべきです。特に MacBook Pro with Retina display で 2x のページは作ってる、という方はいるかもしれません。しかし PC ではこのように 125% や 150% も考慮すべきで、それも視野に入れて設計してください。
☆について
☆は優先度が低いものです。実際、デバイスの量が少ないので、私は☆がついていないものを対応すれば、とりあえず一般的なデバイスはカバーできていると思います。
私が思うに、デバイスのサポートは 1 年でいいと思っている派ですので、1 年以上前の機種はぶっちゃけ対応しなくていいかなぁとは思います。
最後に
ふと気になって久々にまとめてみました。Web サイトを作成するにあたってやはり難しいものですね。iPhone 5/5c/5s みたいな 2x デバイス基準で作ると、1.5x や 3.0x デバイスで半ピクセルボーダーが出てきてしまいますしねぇ… どうするのがベストなんでしょうかねぇ。難しいわ。
おわり
