iPhoneでフォームにforcusしたときズームしないようにする

フォーカスするとページ全体が拡大される

iPhoneでフォーム要素にフォーカスすると画面が拡大されるあの効果。
入力時に画面が拡大表示され、入力が終わっても拡大状態がキープされているあの効果。

スマートフォンでパソコン用のウェブサイトを見ているときは、次のフォーム要素を押しやすくていいのですが
「大きい文字」「大きいボタン」のちょうどいいデザインで拡大されると、これが煩わしい!
スマートフォン最適化するときは、解除したいところです。

この、フォーカスすると拡大される機能は
HTMLのheadで指定するviewportにあるuser-scalable
no(または0)にすると発動しなくなります。

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

user-scalableは、ピンチイン/アウトでの拡大縮小許可だけだと思っていたら
こういうiPhone Safariの独自仕様も制御できるみたいですね。

あたりまえですが、user-scalable=noにしたら、もちろんページを拡大縮小できなるので
スマートフォンサイズに最適化したデザインのページだけで使うのが適切ですね。

関連記事

Pocket