iOSでinputのフォーカス時に画面がズームするのを防ぐ

最近のviewport指定

タッチデバイス用のviewport指定として、user-scalable=no にしない（ユーザの操作の任意性を奪わない）ことが最近では推奨されるようになっています。

ガチガチ

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

最近の推奨

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

悩ましい点

iOSでは、input要素に指定しているフォントサイズが「16px」を下回ると、フォーカス時にズームされる という仕様があります。入力し終わった時や、入力をキャンセルしたときにズームしたままなので、ユーザがピンチアウトして等倍に戻さないともとの見た目に戻りません。特に position: fixed; しているパーツがあると、正しく操作できない可能性もあります。
かと言って、16pxにすると大きすぎる！というデザイン的な事情もあるかも知れません。

解決策

力技ですが、font-size: 16px; はしておきつつ、transform:scale() で縮小表示すると、iOS側には「16pxですよ」と示しつつ、見た目はコンパクト、ということが実現できます。

例

input[type=text] {
  font-size: 16px;
  transform: scale(0.8);
}

注意

ただし「16pxより小さい文字のフォームパーツは操作時/入力にズームさせないと見づらい」という思想は正しくもあるので、背く場合は操作性のチェックは必要です。