inputの文字をscaleで16pxより小さく見せる

モバイル用のデザインデータの入力フォームの文字サイズが10pxになっていたのでデザイン通り10pxで実装していた。が、iOSの仕様でinputとtextareaの文字が16pxより小さい場合はズームインされてしまうこが発覚した。

Googleでは14~16pxが推奨されていているみたいでAppleも同様に文字が小さい場合は視認性を上げるためにズームするような仕様にしたのだと思う。（多分）フォーカス外れたらズームを戻して欲しい気もする。

こちら の記事を参考 & 職場の方のアシストをいただきながら以下のように実装した。

// フォームのスタイルはlabelにあてる。
// inputにscaleをあてる
// tailwindcssの独自の挙動でinputのboxShadowが消えなかったのでstyleを記述して対応
<label className='border border-gray-300 rounded-full block' >
	<input 
		className='scale-[0.6]' 
		style={{ boxShadow: 'none' }}
	/ >
</label>

これでinputの実文字サイズは16pxで見た目の文字サイズは10px（ほど）になり且つズームされなくなった。

ただスタイルをlabelにあてる必要があるので注意。inputとlabelのcss合戦がはじまる。

あとSafariはChrome違って若干cssが効かないことがあるのでちゃんと実機で確認したほうがいい。っていうよりも本来は文字が小さいためにズームをしているのであって、それに反する実装をしているのことをちゃんと理解してなお10pxに見せたい場合のみに使う最終手段だと思った方がいい。