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未満でズームさせているというのは、小さい文字だとユーザーが見辛いからという理由であると考えられます。
どちらが良いのか、ユーザーターゲットなどを前提に考えて、最適な選択をしましょう！
