継続は力なり＃４４

2020年4月23日 23:12

スマートフォンの画面に対応させる

Webページが小さく表示される理由とその対処法

メディアクエリーを使って、パソコン画面向けのCSSとスマートフォンのような小さな画面向けのCSSを別々に指定するサンプルを見ていく
以下のサンプルは、表示領域の幅が 1000ピクセル以上の時にはコンテンツ（h１要素）の幅と高さを 1000px にして、表示領域の幅が 999ピクセル以下の時はコンテンツの幅と高さを 375px にしている
h1要素には box-sizingプロパティが指定されており、その値が「border-box」となっているため、ボーダーまでを含めた範囲が指定した幅と高さに設定される
contentプロパティを使用して、その状態での幅がテキストで表示されようにもなっている

例

HTML

<h1>幅：</h1>

CSS

body {
   margin: 0;
}
h1 {
   margin: 0 auto;
   padding : 0.5em;
   box-sizing: border-box;
   border: 20px solid #ddd;
   color: #fff;
   background-color: #936;
}
@media screen and (min-width: 1000px) {    /*1000pxのとき*/
 h1 {
   width: 1000px;
   height: 1000px;
}
h1::after {
   content: "1000ピクセル";
 }
}
@media screen and (max-width: 999px) {     /*999px以下のとき＊/
 h1 {
   width: 375px;
   height: 375px;
 }
 h1::after {
   content: "375ピクセル";
 }
}

このサンプルをブラウザで表示させ、ウィンドウの幅を広くしたり狭くしたりしてみると上記のようになる
ウィンドウの幅が1000ピクセルよりも狭くなると、適用されるCSSが瞬時に切り替わり、表示は一瞬で変化する
幅が狭い状態から広くしたい時も同様である

同じサンプルをスマートフォンで表示させるとどうなる

前ページのサンプルをスマートフォンで表示させるとどうなるか
前のサンプルで表示領域の幅が999ピクセル以下のときのコンテンツの幅を375pxにしたのは、 iPhone6〜8 の画面の幅がそのサイズだからである
（ iPhone6〜8 で見るとコンテンツが横幅ぴったりで表示されるはず）

実際に iPhone8 で表示させてみると、以下のようになる
本来であれば画面の幅いっぱいに、ぴったりのサイズで表示されるはずのコンテンツが、何もしてないのに小さく表示されてしまった
原因はなんなのか？