2012/02/13iPhoneでスマートフォンサイトをみていたら、ピンチで画像を拡大できない。いう問題が発生しました。ピンチとは2本指で画面をつまむようにして、画面を拡大・縮小することです。結果からいうと、viewportの設定が原因でした。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」の値に幅を持たせばいいわけです。2.2のブラウザで確認したところ「minimum-scale=1.0,maximum-scale=1.0,user-scalable=0」としてもピンチで拡大できました。それもそのはず、viewportの設定は元々はiOSで規定されたものです。公式サイトではAndroid2.0以降でviewportに対応したという報告もありますが、多様なデバイスがリリースされる中、設定が有効にはならない端末もあるようです。2.2は例外で、このパラメータは使えないということのようですね。viewportの解釈はデバイス毎に異なるようなので、スマートフォンサイトの構築において、しばらくは対象機種でのチェックは念入りにしたほうがよいかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。