WEBシステム開発・デザイン制作などすべての作業を一貫してご提供しております。(大阪・東京近辺)

スマートフォンサイトのForm Inputにフォーカスすると拡大される

これは不具合なのか?仕様なのか?それすら分からない自分が悩ましい。

最近ではスマートフォンサイトに対応したサイト制作が標準化されてきました。

今まではパソコン版サイトの制作、それとは別にガラケー版サイトとスマートフォン版サイトと

それぞれ分かれての制作が多かったのですが、今ではパソコン版とスマート版がセットで製作することがほとんどになりました。

レスポンシブルデザインでいいので、スマートフォン用にある程度最適化されたページにしたいと言ったご要望も多くあります。

HTML5、CSS3に対応したフレームワーク(Bootstrapなど)を利用すれば、面倒な作業を大幅にショートカットすることもできてしまいます。

ただ、落ちとしては古いブラウザー(IE6,IE7,IE8)に絶対に対応してほしいと言う要望もまだあり、HTML5やCSS3を利用できない悩ましい問題もあります。

そんなこんなで

最近ではHTML5,CSS3の機能をフルに活用したサイト制作も多く手掛けるようになり(他のスタッフであり、私は蚊帳の外ですが・・・)

自分なりに検証してみたりしています。

システム系の人間なので、フレームワークを使ったサイト制作はある程度理解が早く(自称)

いろいろな機能を使ったサイトが制作できるようになりました。

そして、気になる現象が・・・

フォームの入力欄をクリックすると、画面が拡大していままでピッタリと合っていた画面サイズが

スクロールバーの出現で崩れてしまうことに気付くのでした。

入力を終えても、画面が拡大したままもどりません。自分で縮小しなければならずとても面倒です。

拡大を無視してそのまま見ればいい話なのですが、多くのユーザーが見るページの場合、ユーザビリティーが下がってしまいますよね。

どうにかして解消する方法が無いのか調べて見ることに。

現象として

入力フォームの入力欄(input,textareaなどなど)にフォーカスがあたり、スマートフォン用のキーボードが表示された時点で

画面が拡大されてしまいます。

対策として

・フォーカスイベントを取得して回避?(面倒そうなので今回は調べるのも保留)

・viewportで拡大をOFFに設定する(拡大出来ないとユーザビリティーが下がりそうなので却下)

・他のサイトでの動作を確認(拡大するサイトと拡大しないサイトがあるのが分かった)

とまあ、いろいろ調べて見たのですが

単純に解決するには、 入力欄のフォントを大きくしていればいいとの事が分かりました。

通常のbodyに合わせた12px、や14pxのまま利用するのでは無く16px以上の指定に

していれば拡大しない。

16pxぐらいだと大きさに違和感も無く使えそうです。

もう少し自分でHTML5やCSS3について経験を増やし

HTMLコーダー的な仕事もたまにはしてみたい気もします。