スマートフォンサイトのviewport設定でピンチがピンチ

iPhoneでスマートフォンサイトをみていたら、ピンチで画像を拡大できない。
という問題が発生しました。
ピンチとは2本指で画面をつまむようにして、画面を拡大・縮小することです。

結果からいうと、viewportの設定が原因でした。

viewportはスマートフォンサイトを画面にフィットさせるためのメタ情報であり、これまでは「おまじない」感覚で下記のように設定していました。

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

これら要素を一つ一つ確認してみると、なんてことはない、きちんと理解していれば解決できる問題でした。

width=device-width

これはサイトのサイズをデバイスの横幅にフィットさせて表示するという設定です。つまりは、横スクロールが表示されない程度にフィットします。
サイトの操作性を考えてもこれは必須の項目だといえます。

initial-scale=1.0

こちらは初期表示時に画面の拡大率を設定します。
つまり、初めてのその画面を開いた時のデフォルトの要素の拡大率が100%であることを意味しています。

minimum-scale=1.0,maximum-scale=1.0,user-scalable=0

これらはピンチ操作による画面の拡大・縮小に関する設定です。
デフォルトは「user-scalable=yes」で、ピンチによる拡大縮小が可能であることを意味しています。これを「user-scalable=no」や「user-scalable=0」とすることで、拡大縮小を禁止します。
「maximum-scale」は拡大率の制限で、「maximum-scale=2.0」とすると2倍まで拡大表示できるということです。一方で「minimum-scale」で縮小率を制限します。

つまり、iPhoneでピンチによる画面拡大縮小を有効にするためには「user-scalable=no」を削除し「minimum-scale」と「maximum-scale」の値に幅を持たせばいいわけです。
（もちろん「minimum-scale」「maximum-scale」を削除するのもあり）

Androidで設定する場合の注意点

Android 2.2のブラウザで確認したところ「minimum-scale=1.0,maximum-scale=1.0,user-scalable=0」としてもピンチで拡大できました。

それもそのはず、viewportの設定は元々はiOSで規定されたものです。公式サイトではAndroid2.0以降でviewportに対応したという報告もありますが、多様なデバイスがリリースされる中、設定が有効にはならない端末もあるようです。

どうも私の手元にあるAndroid 2.2は例外で、このパラメータは使えないということのようですね。

つまり、viewportの解釈はデバイス毎に異なるようなので、スマートフォンサイトの構築において、しばらくは対象機種でのチェックは念入りにしたほうがよいかもしれません。