株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • iOSで、input, textarea入力時にズームインしてしまうのを解決する方法
2023年9月29日
iOSで、input, textarea入力時にズームインしてしまうのを解決する方法

iOSでinput, textareaを入力時にズームインしてしまう問題を解決する方法を紹介します。

設定は簡単です。

input,textarea { font-size: 16px; }

上記は16px以上で、ズームインを回避することができます。

また、もう一つの方法としてviewportの設定でズームインしてしまう問題を解決できるので、紹介します。

以下のmetaタグをHTMLのheadの中に設定するだけです。

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

上記、最後のmaximum-scale=1.0を入れると、ズームインされなくなるので是非お試しください。

※ただ、Androidだとピンチアウト、ピンチインが効かない場合も出てくるため注意が必要です。フォントサイズを大きくしたくない場合以外は、font-size: 16px;で設定することをお奨めします。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする

  1. iOS