| パソコン / ホームページの作り方 |
| 2020/4/26 |
750pxで作ると、はみ出してしまう
Web上では、「スマホサイトは750pxの横幅で作るのが良い」という意見があります（【2020年版】Webデザイナーが覚えておきたいWebデザインの横幅サイズを解説！、WEBサイトの横幅のサイズはいくつか良い？何pxが最適なのかを徹底解説！）。
そこで、このサイトのトップページを、横幅750ピクセルで試作してみました。すると、5インチのアンドロイドスマホでは、750ピクセルそのままの大きさで表示されて画面からはみ出してしまいました。ブラウザはFirefoxを使っていますが、Chromeでも同様の結果となりました（なお、Chromeは強制的に位置情報を取得されるので普段は使っていません）。
4インチのiphoneでは、画面に収まるものの、全体が縮小されているので、文字がかなり小さくなっています。アンドロイドでは、はみだしたページを画面に納めるためには、ダブルタップやピンチインで縮小する必要がありますが、iphoneでは、自動的に縮小されているようです。
モバイルフレンドリーテストのスクリーンショットでも、画面に収まるものの文字はかなり小さいです。
アンドロイドもiphoneもOK
そこで、ページ幅の指定を止めてみました。すると、5インチのアンドロイドスマホでも、画面にぴったり収まりました。
4インチのiphoneでも、適当な大きさの文字で画面に収まりました。
モバイルフレンドリーテストのスクリーンショットでも、適当な大きさの文字で画面に収まりました。
大きな画像は、はみ出してしまう
この試作ページの画像のサイズは「width="300" height="533"」で指定していますが、原寸は「500px × 889px」なので、そのサイズで指定してみました。すると、5インチのアンドロイドスマホでは、画面からはみ出してしまいました。
4インチのiphoneでは、画像が画面に収まるように、全体が縮小されているので、文字が小さくなっています。
したがって、画面の小さなスマホに配慮するなら、画像のサイズは「width="300"」以下で指定するか、画面幅に対する比率、たとえば「width="60%"」などで指定した方が良さそうです。なお、比率で指定する場合は縦幅の記載は省略できます。
スタイルシートでPC画面にも対応
今回試作したスマホ用ページを、PC画面で表示させると、画面全体に広がってしまい、とても見づらくなっています。
そこで、次のようなスタイルシートを使って、ページの最大幅を520ピクセルに指定し、ページを画面の中央に表示させることにしました。
スタイルシートに、次のように赤字の3行を挿入します。
| <head> <style> p { font-family: "メイリオ"; } BODY { BACKGROUND-COLOR: #e0e0e0; MAX-WIDTH: 520px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; } </style> </head> |
520pxまでは、全画面表示されるのでスマホ画面にも、ぴったりと収まりますし、PC画面ではPCページの本文（520px幅）のみが同じサイズで表示されます。
それならば、PC用ページは要らないではないかということにもなりそうですが、この試作ページでは、サイト全体が俯瞰できないという問題があります。スマホページを作る(3)サイトを俯瞰するにはでは、それについて検証します。