Xperiaはviewportが効かない

先月までスマートフォンサイトを制作してまして、そこではまったのがXperiaのChromeです。

Androidの実装が不十分だったのかわかりませんが、スマートフォンサイトには欠かせないmetaのviewport指定が無視される仕様？になっていました。

metaタグのviewport指定というのは何か？といいますと、スマートフォンで画面表示時の横幅のサイズが指定するためのものです。

サンプル：<meta name="viewport" content="width=480,user-scalable=yes" />
         widthは幅指定
         user-scalableはユーザー側での拡大縮小可否。

スマートフォンは解像度が様々なので（IS01は横幅960px）、viewport指定がないとこちらが意図した表示がされません。

Xperiaはデフォルトの表示設定が中になっているのですが、その設定だと横幅320pxで表示しようとします。設定を小にかえると480pxで表示しました。

iPhoneはviewport設定に完全対応していて、縦表示でも横表示でも指定した幅で画面表示します。
Androidは全体的に、向きを変えると向きを変える前の倍率のまま表示してしまいます。IS01でもそういう挙動でした。

Android向けにサイトを作る際はそのあたりも気にして作る必要があります。

POINT

iPhone向けだったら、viewport指定すればiPhone4/3GS/3Gサイトが作れるが、Androidにも見せる場合、崩れるので最低でもuser-scalableをyesとしておいて、ユーザー側で縮尺を変えてもらうようにする。