O hirunewani blog

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

Created at

iOSでinputにフォーカスするとズームしてしまう問題について調査した結果をまとめた。

まずiOSの仕様として、font-sizeが16px未満である入力要素にフォーカスした場合、自動的にズームインが行われる。

これはズームインされることが考慮されていない場合、見せたい表示にならなかったり、画面が崩れてしまう原因になる。

対応策

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を指定することで入力要素にフォーカスした際の自動ズームインは抑制できることが分かっている。

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

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