小さなイノベーションの連続が未来を創る

ソナーリズム株式会社

Designing for Mobile

フォームの Input にフォーカスすると自動的にズームされてしまうのを防ぐ方法

更新日:

iOS Safari でのフォーム入力で見られる問題

フォームを入力する場面はたくさんありますが、昔のままのフォームをそのまま使っている方も多く、エンジニアさんに協力していただき、各機関のフォーム入力のモバイル対応を急いでいただきたいと日々思っている。
一番気になっているのが、フォームにフォーカスを合わせると自動的にズームされてしまい、現在どの項目を入力しているのかが全く分からなくなるという点。
PC であればタブキーを押すと次のフィールドに移動しますが、モバイル端末の場合、専用キーボードに次へ行くか戻るかのボタンが付いている。これを押すことで次に行くのは簡単ですが、この自動ズームのために項目名が画面外にはみ出し、入力が困難な状況に陥ってしまう場面に多く出くわす。

難しい解決方法

一般的には CSSでてきそうなものだが、そんなのできるわけがない・・と勘違いをしてしまって、難しい解決策を探し出してしまう。例えば javascript で jQuery などを使って focus イベントを取得してズームを調整するなどがそれに当たる。
他にも meta タグで view-port の user-scalable を 0 に設定するという・・全くズーム禁止なんていうユーザーがズームしたい時ですら禁止するという、全く俺様的な方法論を導き出してしまったりする。

簡単な解決方法

対象の箇所だけのズームを切るというのも不可能なので、放っておいて頂戴とブラウザに伝えるのが一番早い。それがこの方法。

[code language="plain"]input, textarea {
font-size: initial;
}
[/code]

これだけである。テキストフィールドのズームは、フォントサイズが起こしているのか的な発見がある。他にもテキストサイズを 16px にするという方法もある様なのですが、こちらはサイトによって違うので、汎用的な解決方法にはならず、あまり良い方法とは言えないと判断した。

UX/UI は最近多く語られていますが、市場が追いつくにはまだまだエンジニアの皆さんの力が必要です。弊社でも関わらせていただいているプロジェクトにおいては努力を続けております。

オススメ記事

-Designing for Mobile
-, , , ,

Copyright© ソナーリズム株式会社 , 2018 All Rights Reserved Powered by AFFINGER5.

X