拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

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を何も指定しないと
このように全体がとんでもなく縮小された状態でページを表示してしまいます。
表示しているのはさきほどのサンプルページです

画面を回転させた時にも表示倍率が切り替わってしまいますので
見た目も操作性も、このままでは実用的とはいえません。

そこで、ズーム操作を許可している場合のviewport設定例を
2パターンご紹介します。

倍率を固定し画面幅ぶんだけ表示領域が広がる

画面が回転したとき倍率はそのまま
initial-scale1に設定すると
画面が回転しても拡大縮小はおこりません。

<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もあわせて設定しています。

関連記事

Pocket