iOSのinputで画面ズームがされないようにする方法

Webフォームで使われる、「input」。

<input type="text" name="example" value="" placeholder="名前">

みたいなやつです。

iOSの場合、この「input」項目にカーソルを合わせると、


※iOSで見ると、ズームするはず。

画面ズームが作動して、入力欄部分にズームインします。

この自動で行われる画面動作が行われないようにしたい場合、どのような処置をしたら良いのか、ご紹介します。

画面フォーカスされる条件

画面ズームされるのには、条件があります。

iOSでは、input要素に指定しているフォントサイズが「16px」未満だと、フォーカス時にズームされるという仕様になってます。

フォーカスを外しても、画面ズームは維持されるので、画面を元に戻したい場合は、ピンチアウトする必要があります。
これはちょっといけてなかったりしますよね。

画面表示を固定化するためには、メタタグで

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

を書いておく必要がありますが、これに関係なく、上記条件の場合、inputでズームしてしまうのです。

フォントサイズを16pxにすれば解決するけど

当然、inputのフォントサイズを16px以上にすれば解決します。


※fontsizeを16pxにしているので、iOSで見ても、ズームしない。

でも、ちょっと大きすぎる感じがしますよね。

フォントサイズを小さくしてもズームしない技

若干裏技的ですが、実はfontsizeが16px未満でもズームさせないやり方があります。

input[type=text] {
font-size: 16px;
transform: scale(0.8);
}

このように、fontsizeは16px以上でしていしつつ、transformで大きさを縮小してあげる方法。
16*0.8 の大きさであることをiOSが認識し、ズームが行われないというわけです。

まとめ

いちいちピンチアウトしながらフォームの操作をユーザーに行っていただくのは、場合によってはコンバージョンを下げているかもしれません。
ただ一方で、16px未満でズームさせているというのは、小さい文字だとユーザーが見辛いからという理由であると考えられます。

どちらが良いのか、ユーザーターゲットなどを前提に考えて、最適な選択をしましょう!

あわせて読みたい