AndroidやiPhoneでinput要素をフォーカスしたとき自動で拡大される現象

Question

inputやtextarea要素に対してフォーカスしたとき、自動拡大される現象をどうにかしたいです。
検索で調べたところfont-sizeが16px以上で改善されるとの情報が多くありましたが、やってみても全く効果がありませんでした。
かといってviewportで拡大縮小を制限するのも嫌なので、良い方法を教えていただきたいです。

よろしくお願いします。

Answer 1

もう一度16pxの指定を入れた状態で実機ではなくPCのchrome等のデベロッパーツールで確認し、他のcssに上書きされてないか確認してみてはいかがでしょうか。

例えば下記のようなケースの場合最終的に有効なのは12pxになります。

<form id="test_form">
<input type="text" value="" name="hoge">
</form>

#test_form input{
  font-size:12px;
}
input{
  font-size:16px;
}

上記確認の上ダメな場合は再現性のあるhtml,cssのコードを質問に追記されたほうがよいかと思います。

Answer 2

iphoneだと16pxで正常に表示されますね

 var ind=0;
 var fs=0;
 $(function(){
   $(document).on('mousedown','input, select, textarea',function(){
   	fs=$(this).css("font-size");
   	$(this).css("font-size","16px");
   	ind=$('input, select, textarea').index(this);
   	setTimeout(function(){
   	 $('input, select, textarea').eq(ind).css("font-size",fs);
   	},1);
   });
  });