URLをコピーしました!
スキルアップを始める!

【CSS】ビューポートメタタグでスマホの画面を調整する|いきなり画面がフォーカスを防ぐ

CSS(シー・エス・エス)
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

スマホで、inputテキストの入力時に、いきなり画面がフォーカスして入力しにくい動きが発生しました…!

アプリと同じように、インプット入力時に自動的にズームにならないように制御してみます。

フォーカスを制御するmetaタグ

下記のように、ビューポートメタタグを使って制御することができます。

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

width=device-width:

この部分は、デバイスの幅に合わせてウェブページの幅を調整するように指定しています。つまり、ウェブページはデバイスの画面幅に合わせて自動的に調整されます。

initial-scale=1.0:

[rml_read_more]

これは初期のズームレベルを指定しています。1.0は通常のズームレベルで、ウェブページを通常のサイズで表示します。

maximum-scale=1.0:

この部分は、ユーザーがズームイン(拡大)できる最大のレベルを1.0に制限します。つまり、ユーザーはウェブページを通常のサイズよりも拡大できません。

まとめ

このメタタグは、ウェブページがモバイルデバイスで適切に表示されるようにするために使用されます。特に、モバイルフレンドリーなデザインを実現するのに役立ちます。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら