iOSで入力フォームでズームするのを防ぐ方法

2017/06/21

iOSは、入力フォームにフォーカスすると、自動でビューポート(ズーム値)を調整します。そのことで無駄に画面を拡大してしまい、入力後に元に戻さないといけません。この自動調整を防ぐには、フォントサイズを16px以上に設定します。

サンプルコード

iPhoneやiPadなどiOSでは、入力フォームのフォントサイズが16px未満だと、入力時に文字を大きく見せようとお節介な自動調整をしてくれます。Androidしか持っていないウェブ制作者も、「フォームの文字は16px以上にしておく」ということを覚えておきましょう。

input {
	font-size: 16px ;
}

デモ

上の入力フォームは、フォントサイズを16px以上に設定しているので、フォーカスしても画面が拡大しません。iPhoneなどでお試し下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
input {
	width: 95% ;
	height: 30px ;
	font-size: 13px ;
}

.target {	
	font-size: 16px ;
}
	</style>
</head>
<body>
	<p>iOSで入力時にズームアップしません。</p>
	<p><input class="target" type="text" value="font-size: 16px"></p>
	<hr>
	<p>iOSで入力時にズームアップします。</p>
	<p><input type="text" value="font-size: 13px"></p>
</body>
</html>

サンプルコード

デモ

関連記事