シンプルな暮らし。

問題児のViewport。いろんな端末でいろんな挙動を示すらしく、Viewportに何を指定するのか悩みました。

リキッドで横幅320pxをターゲットとしている場合

最低の横幅を320pxと想定して作成されたリキッドの画面であれば何も悩まずに以下を指定すればOKですね。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

リキッドで横幅320px以上をターゲットとしている場合

今回の案件はPC画面とHTMLを共有している影響で、横幅320pxに収まりませんので、上記の指定ができません。なぜ320pxにこだわるかと言うと、個人的な経験則ですが以下の仕様が存在すると思われるから。

• Viewportの横幅に指定する値がブラウザの横幅解像度(たいていは320px。ディスプレイの解像度ではなく、devicePixelRatioで換算した値)以上
• ユーザーによる画面拡大操作(user-scalable)を許可しない

上記ふたつの条件が揃った場合に、Viewportで指定した横幅の数値が無視されるようです。結果として、Viewportの横幅が「320px」に強制的に解釈されて画面が拡大されてしまいます。※Galaxy S(Android2.2での検証結果)

devicePixelRatioとの関係

また注意するべき点は、横幅というのは、ディスプレイの解像度ではなく、devicePixelRatioで換算したブラウザでの値になる点。算出方法は「ブラウザの表示領域(横幅と縦幅) = ディスプレイ亜解像度 / devicePixelRatio」となります。端末ごとのdevicePixelRatio値を[to-R]さんでまとめられているものを参考にして以下の表にまとめています。

ネット上でもいろんな情報がありますが、個人的には上記の2つの条件が揃った場合にViewportが無効になりました。恐らく多くのAndroid端末で同じ挙動ではないかと予測しています。

逆を言えば、どちらかの条件に該当しなければ良いので、今回はAndroidの場合には「user-scalable=no」を諦めました。iPhoneは上記の条件に該当しませんので、「user-scalable=yes」とします。