スマホの画面に切り替えたときに拡大して表示される

Question

スマホ版に画面を変更したときに、下の画像のように拡大されて表示されてしまいます。
最初から画面幅いっぱいに表示させる方法を知っている方がいましたら、教えていただけると幸いです。>

Answer 1

画面サイズによってUIを設定する手段として、基本的に二つあるとすると以下の設定で対応できます。

• viewport
• メディアクエリ

・viewport

headのmetaタグに挿入し、画面のサイズに応じて、UIの挙動を変更する設定です。

画面拡大できないようにする場合

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

画面拡大ができるようにする場合

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">

・メディアクエリ

これは画面サイズに応じて、cssのプロパティの値を変更する方法です。

@media screen and (min-width:480px) { 
    /*　画面sizeが480px以上は、pタグのcolorを青色にする　*/
 p {
  color: blue
 ;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面sizeが480px以上は、pタグのcolorを赤色にする　*/
 p { 
  color: red;
 }
}
@media screen and (min-width:1024px) {
    /*　画面sizeが480px以上は、pタグのcolorを黒色にする　*/
　p { 
　　color: black;
　} 
}

pタグの色を変更するようにしていますが、変更したい書く要素のwidthやheightを変更すればいいと思います。

viewport、メディアクエリなどで検索すると様々な設定方法が出てきます！

Comments

[Homaki]

分かりやすい解説ありがとうございます
無事解決することができました！