2018/07/22スマホでウェブサイトを見ている時、入力フォームをタップしたら画面が拡大することがありますよね。あの現象をCSSで制御できる方法を見つけたのでご紹介します。ウェブサイト制作者で困っている方はぜひご覧ください。結論から言うと、フォントサイズをいじるだけでした。LINKフォームのフォントサイズを調整する当ブログの上部に検索フォームがありまして、このフォームをタップすると、このように画面の左右が少し欠けるくらい拡大してしまうんですね。このような「スマホの入力フォームをタップして入力しようとする時に拡大する現象」を防ぐには、「フォントサイズを100%以上、もしくは16px以上」にすれば簡単に解決できます。HTML,CSSの記述例はこんな感じです。サンプルのHTMLがこんな感じ。CSSは下記のようにfont-sizeを16pxにしておきましょう。16px以上なら問題ないので18pxでも20pxでも大丈夫です。16px;}もしくは100%を指定してもおっけー。100%;}とにかく、inputに対してフォントサイズを大きめに設定しておけば、スマホでの使い勝手が向上しますよ。最後に入力フォームで文字入力したあとに拡大した画面を戻さないといけなくて、なんとなく使いにくい感じがしてたんですよね。1行で解決するので、僕と同じように不便だと感じてた方はぜひお試しください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。