見出し画像

スマホが勝手にinput要素をズームする問題

フォーム要素があるページをスマホでみているとき、
入力しようとすると、何も指定していないにもかかわらず
勝手ににゅんっとズームする問題。
見て見ぬ振りをしてきましたが(とくに指摘されたこともなかったし・・・)、どうやらfont-sizeが影響しているようです。

にゅんっのひと。

font-sizeを16px以上に変える

16px以下の文字サイズになっているときに、見やすいよう(またこれ)
勝手に大きくしてくれるようで。iPhoneさん・・・ほんとに・・・
それよりも大きい数値にすれば起こらなくなります。

font-size: 16px;

viewport の拡大率を指定する

meta情報のmaximum-scale1.0に。もしくはuser-scalable=no
デザイン上どうしても16px未満じゃないとだめ!というときはこちらを使いましょう。
昔はこれを設定すると拡大できなくなって逆に不便な記憶がありますが、iOS10以降では無視される値らしいです。やっぱり見えづらいのは致命的。

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

最大拡大率は無視されるけどフォーカス時にズームはしなくなります。
ただし、Androidではどちらを使っても拡大縮小できなくなるので注意!!
iOSでのみこの設定が有効になるようJSで設定が必要です。

めんどくさい仕様では、ありますが
16px未満は見づらい、という見解でもあると思うので
このあたりはデザイナーさんとも要検討かもしれません。

この記事が気に入ったらサポートをしてみませんか?