Q. iOSでinputにフォーカスするとズームしてしまう

font-size を 16px 以上にする#

そもそも font-size が 16px 未満では入力が困難であるという Apple の考えにより導入されている仕組みであると考えられるため、本当にそのフォントサイズで問題がないのかは考えるべきである。

ズームされても問題がないようにする#

そもそもズームインされることを考慮してデザインと実装を行うことが望ましい。 入力時に以外でも文章を読むためにズームインを必要とするユーザーは存在するため、多くのユーザーに快適に利用してほしいサービスではこのような対応が求められるべき。

見かけ上、font-size: 16px 未満にする#

Apple のズームインは実際に表示される大きさを元に判断しておらず、値のみを見ているため、transform プロパティなどを利用すると騙すことが出来る。

meta タグで制御する#

2016 年の iOS 10 でアクセシビリティの改善を目的に、ユーザーによる拡大を無効化するuser-scalable=noが効かなくなった。 またmaximum-scaleも一切アナウンスがなかったため詳細は不明だが、同時期に効かなくなり、例えばmaximum-scale=3.0を指定しても 3 倍以上にズームできるようになった。

これらの変更により、meta タグによる制御は出来ないと思われていたが、意図された挙動なのかは不明だがmaximum-scale=1.0を指定することで入力要素にフォーカスした際の自動ズームインは抑制できることが分かっている。

1
<meta
2
  name="viewport"
3
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
4
/>

ただし、この方法は意図された挙動なのかは不明であり、今後の iOS のアップデートで変更される可能性があるため、注意が必要である。 また、アクセシビリティの観点からも、これを許容していいのかはとても怪しいものである。