スマホ表示の時 inputタグで入力時の際に拡大されて、幅がはみ出る解決方法

カテゴリー︎： 【CSS】・【iPhone (iOS)】

スマホ表示の時 inputタグで入力時の際に拡大されて、幅がはみ出る解決方法

解決した時の備忘録

スマホ表示の横幅サイズ 800px 以下の時に適用される
cssにペーストしてね


      /* スマホの表示幅で適用 テキスト入力の時に拡大されて、幅がはみ出る */
      @media (max-width: 800px) {
        input {
          width: 100%; /* inputタグの幅を親要素に合わせる */
          box-sizing: border-box; /* paddingとborderを含めて100%に収める */
          max-width: 100%; /* 最大幅を100%に制限 */
        }

        /* フォーカス時の拡大を防ぐ */
        input,
        textarea {
        font-size: 16px; /* iOSのフォーカス時の拡大を防ぐために16px以上のフォントサイズを設定 */
        }
      }

【追記】
上記のcssを追加してもうまくいかない。。。

あらためて調べてみたら

iOSのinputやtextareaでクリック時に勝手にズームしてしまうのを防ぐには、メタタグに「maximum-scale=1.0」を設定したら、うまくいった！

【修正箇所】

これを before
↓
<meta name="viewport" content="width=device-width, initial-scale=1.0">



これに変更 after
↓
<meta name="viewport" content="width=device-width, maximum-scale=1.0">

もしもcssの設定だけでうまくいかなかった場合には、メタタグの修正をぜひ試してくださーい！

【ざっくり解説】

＜meta name=”viewport”＞ タグは、Webページがモバイルデバイスでどのように表示されるかを制御するために使われる。

このタグの設定により、ユーザーのズームやページのスケーリング動作が変わる。

＜meta name=”viewport” content=”width=device-width, initial-scale=1.0“＞

【意味】
この設定では、ページの幅がデバイスの幅（device-width）に対応するようにして
最初のズームレベルを1.0（デフォルトのサイズ）に設定する。

【効果】
ページはデバイスの画面幅に合わせて拡大縮小され、初期表示時にズームされない。
ユーザーは後から自由に拡大・縮小ができる。
ズーム: ユーザーはズームイン・ズームアウトが可能。

＜meta name=”viewport” content=”width=device-width, maximum-scale=1.0“＞

【意味】
ここではページの幅をデバイスの幅に合わせ、さらに最大のズームレベルを1.0に制限する。
これにより、ズームインができなくなる。

【効果】
ページが最初からデバイス幅に合うように表示され、ユーザーはズームすることができない。
ズームアウトもできず、常に同じスケールで固定される。
ズーム: ユーザーはページをズームイン・ズームアウトできない。

【要するに】
initial-scale=1.0 は、ページの初期表示スケールを1.0に設定し、ユーザーがズームをできるようにする設定。

maximum-scale=1.0 は、ズームを完全に無効にして、ユーザーがページのサイズを変更できなくする設定

PAGE TOP