iOSのSafariには、
フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという
ありがた迷惑な独自仕様があります。
（ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…）
以前、この現象を回避する方法として
viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが
ピンチイン（アウト）での拡大縮小は許可したまま
iPhone（iPad）でフォームにforcusしたときズームしないようにする方法もありました！
サンプル
※iPhoneでひらくと動作を確認できます
入力フォームのfont-sizeが関係していた
iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからでしょうか
inputとtextareaの文字サイズが16px以上なら
フォーカス時の自動拡大はoffになります
書き方がちがっても、フォームの文字サイズが実寸16px以上なら拡大されません。
- font-size: 16px
- font-size: 1em（親要素の文字サイズが16px相当の状態）
- font-size: 100%（親要素の文字サイズが16px相当の状態）
文字サイズ設定のバリエーションについては
参考サイトのほうが詳しく紹介くださっています。
参考：
iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象について
拡大縮小OKなviewportの設定
ピンチイン（アウト）で画面を拡大できるようにするには、viewportの
最大倍率を設定する maximum-scale に、1以上の値を設定
ズームの許可を設定する user-scalable にはyesを設定します
それぞれ、初期値が maximum-scale=1.6, user-scalable=yes なので
あえて値を設定しなくても、記述を省略すれば拡大できるようになっています。
だた、viewportを何も指定しないと
このように全体がとんでもなく縮小された状態でページを表示してしまいます。
表示しているのはさきほどのサンプルページです
画面を回転させた時にも表示倍率が切り替わってしまいますので
見た目も操作性も、このままでは実用的とはいえません。
そこで、ズーム操作を許可している場合のviewport設定例を
2パターンご紹介します。
倍率を固定し画面幅ぶんだけ表示領域が広がる
initial-scaleを1に設定すると
画面が回転しても拡大縮小はおこりません。
<meta name="viewport" content="initial-scale=1.0" />
画面幅にあわせて拡大
width=device-widthのみ設定すると
コンテンツ全体をスクリーン幅にあわせて拡大フィットさせます。
<meta name="viewport" content="width=device-width" />
viewportでパソコン用のウェブサイトをiPad対応はこの一種で
width=コンテンツのカラム幅を設定しています。
その他、画面を回転させたときの拡大縮小の設定
iPhoneは、これまで紹介した
フォーム要素のフォーカスやviewportの設定以外にも
画面を回転させ、ランドスケープ（横長表示）になったとき
文字サイズを拡大する独自仕様があります。
これを防ぐには、CSSで
bodyへCSSで-webkit-text-size-adjustを設定します。
まとめ
フォーム要素をどこかで使っているスマートフォンサイトで
forcusしたときズームしないようにするには
画面をピンチイン（アウト）で拡大縮小する必要がある時は
フォーム要素の文字サイズを16px以上に設定します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0" />
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" />
body {
-webkit-text-size-adjust: 100%;
}
input,
textarea,
select {
font-size: 16px;
}
もし、フォーム要素の文字サイズは16px以下でないといけないデザイン的な制約がある場合は
ピンチイン（アウト）での拡大縮小を禁止し倍率も1へ固定します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
user-scalable=no だけ設定すれば大丈夫そうなんですが
maximum-scale=1.0 をしていないと、フォーカスしたときの拡大はちゃっかり発動します。
そして、user-scalable=noなので元の倍率にもどせなくなります…
そのため、minimum-scale=1.0, maximum-scale=1.0もあわせて設定しています。
