以前はGalaxy Noteのブラウザ解像度に付いて書いて好評だったが、今度は昨日発売されたばかりのGALAXY S3を店頭でチェックしてきた。
どうやら
GALAXY S3 ブラウザ解像度 幅360px
Galaxy Noteもそうだったようにブラウザ解像度は実際の本体解像度の丁度半分に設定されている。これで大体半分になるだろうことは目星が付いたので今後はいちいち店頭でチェックする必要もないことだろう。
CSS3のメディアクエリーは本体解像度ではなく、当然ブラウザ解像度を返す仕組みになっているからしっかり縦持ちでの横幅ブラウザ解像度は把握しておきたい。
- iPhone 320px
- Galaxy S2 320px
- Galaxy S3 360px
- Galaxy Note 400px
標準ブラウザがどうやらChromeになっているようだ。ブラウザ解像度の扱い方の違いは確認できなかったが、同じWebKitなのでメディアクエリーも同じになっていることでしょう。パッと見の違いは上部のアドレスバーがスクロールしてもChromeはずっと残っているってところ。ツールバーを隠すための1px下に移動するJavaScriptもChromeだと意味がなくなる。Androidを設計しているGoogleがなぜに？ブラウザとChromeに分けてChromeを標準にする必要があるのかと少し思うがブランド構築のためだろう。
iPhoneが320pxでスマホも320pxの横幅だけで想定しているスマホサイトがまだまだ多いが、640px以下をスマホサイトとしてレスポンシブに捉えてWeb制作をする必要があると感じた。640pxを超えてくるとPCサイト扱いで今のところいいのではないかと感じている。
ディスプレイはめちゃくちゃキレイになっているので、容量を軽くしたいのはわかるが、作り手としては綺麗に見える２倍の解像度の画像を使いたいところだ。写真は問題ないが、ロゴやテキスト系画像はそのままの解像度だと荒れて見えちゃってしょうがない。SVGとかが威力を発揮してくるのかも知れない。