フォームタップ時にズームインさせなくする

さてさて、またまた件の時間計算スクリプトの話題です。

スクリプト本体は一応の完成を見ました。計算結果は正しく反映されるようですし、今のところ不具合は発生していません。
少なくとも「計算」ということに関しては。

という書き方をしていると言うことは要するに他にはちょっと問題があるってことなわけです(笑)

それは、ズーム。
最初にこの時間計算スクリプトのページをiphone5sのブラウザ(safari)で開くと、画面にピッタリのサイズで表示されます(だって、そうなるように作っているわけですから!)。
しかし値を入力するためにフォームをタップすると、フォームにズームインしてしまうんです。
しかも困ったことに、このズームはフォームへの入力が完了しても解除されません。
これではせっかくスマホ画面用のサイズで作っているのにその意味が無くなってしまいます。

ところで同じ事で悩んだ方というのはやっぱりいるもので。

ウチのそのページでも<meta>タグでスマホ画面用のサイズ調整を行っていますが、そちらにあった情報によれば、この<meta>タグ内にある「user-scalable」オプションを無効=noにすればOKとありました。

そちらにも書いてありましたが、私もこのオプションって、いわゆるピンチ操作に対するものだと思ってました。
しかし結果的にはこれをnoにすることで、フォームにフォーカスが当たっても画面がズームインしないことが確認できました(少なくともiphone5sでは)。
(ただし、それと同時にピンチによるズームイン/アウトもできなくなってしまいます)

これで入力時にも常にページ全体を表示できます(だって、スマホ用にページを作っているわけですから、変にズームされてページが欠けたりすると使い勝手が悪くなるわけですよ)。

これでまた一つ問題がクリア!
よしよし♪

boota

いろんなモノに、いろんな意味で、ヲタ。なのかも?

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)