【レスポンシブ対応】mediatypeを設定したけど、効かないと思った時に確認したいこと
【レスポンシブ対応】mediatypeを設定したけど、効かないと思った時に確認したい１つのこと
mediatypeを設定したけど、画面がレスポンシブにならない場合に確認すべきことを書いています。
viewportの設定は済んでいますか？
(以下のmetaタグをheadタグ内に設置)
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
各要素の意味
「content=」の「width=」部分には数値を入れることもできます。
想定する数値がある場合は指定すると良いでしょう。
「width=device-width」にすると画面のサイズに合わせてくれます。
「initial-scale=」の部分は、初回読み込み時のサイズです。基本は1にしておきます。
「initial-scale=1」だけで良いという意見もありますが、「width=device-width」も同時に設定しておくのが無難です。
「maximum-scale=」の部分は、1にするとピンチアウト(ズームイン)した時に拡大できないように設定できます。これはお好みで。
最低限これだけ設定しておけば大丈夫です。
mediatypeが効いてくるはずですよ。
最後まで読んでいただき、ありがとうございました。