iPhone実機で入力フォームをタップすると画面が拡大されてしまう

Question

input、select、textareaなどが該当します。

このようにタップすると毎回拡大します

これは16px以下では拡大されてしまうというIOSの仕様で、
調べてみると以下のような対処法が見つかりました。

**１.**font-size:16px;にする

２. font-size: 16px; はしておきつつ、transform:scale() で縮小表示する
https://qiita.com/skwbr/items/b285cc312587c73a4812
→フォームそのものが縮小されてしまうのでNG

**３.**viewport指定で拡大そのものを不可能にする
https://qiita.com/skwbr/items/b285cc312587c73a4812
→ピンチイン、ピンチアウトを制限してしまうのでNG

今製作中のサイトではフォームは14pxのままで、タップした時の拡大をさせたくありません
他に対処法は考えられないでしょうか？

Comments

[x_x]

使い勝手が悪くなるとわかっていながら拡大させたくないとは？

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[arue]

ご指摘ありがとうございます。文章を修正し画像と追加しました。

拡大させたく無い。とは、16px以下にfont-sizeを指定した上でIOSの仕様である拡大を阻止したい、という意味です。

使い勝手が悪くなる。とは、３をした場合ではピンチイン・ピンチアウトの操作を制限してしまうという意味です。

[arue]

kei344さん
ご指摘ありがとうございます。
サンプルを作成してみましたが、こちらを実機でみても現象が起こりませんでした
https://codepen.io/anon/pen/EGNgOe

他に該当のサイト内に何か問題があるかもしれませんので、他の原因を調べて追記させていただきます。

Answer 1

LIGやGrouponなどは16px以下なのに問題がなかったため違いを調べたところ、viewportの指定でした。

<meta name="viewport" content="width=device-width>
↓↓↓
<meta name="viewport" content="width=device-width, initial-scale=1">

こちらで解決しました。

viewportの指定については以下のサイトで詳しく知ることができました。
http://shiru-web.com/2017/07/22/01-65/