iPhone 6, iPhone 6 Plusがだいぶ普及してきまして、最近ではモバイルサイトの見せ方も端末に応じて最適化するようにしてます。
Androidはそんなに幅の狭い端末が多くないと思いますが、iPhone 5s以前のiPhoneは幅が320ピクセルと狭めで、ここだけデザインを変えたいっていうこともありますよね。
そんなときの記述例をご紹介します。
iPhone 4, iPhone 5用にサイトの見せ方を変える
iPhone1つとってもディスプレイの幅が3種類あり、iPhone 4, iPhone 5はやや幅が狭く、iPhone 6 Plusは幅に余裕があります。そのためiPhone 5用に調整するとiPhone 6 Plusでは余白が生まれすぎたり、その逆もあったりします。
今回紹介するのはそれをうまいこと調整する方法です。CSSにメディアクエリという記述を書いて、ディスプレイの幅を条件に分岐させます。
メディアクエリについては以前に記事書いたので詳しくはこちらをご覧ください。
基本的にはレスポンシブウェブデザインで組んでいけば問題ないんですが、例えばテーブルなどの幅をある程度必要とするものはテキストのサイズを小さくしたりすることでiPhone 4やiPhone 5のディスプレイでも見やすくできたりします。
例えばこんな感じ。
.entry table td {
font-size: 16px;
}
@media screen and (max-width: 413px) {
.entry table td {
font-size: 14px;
}
}
@media screen and (max-width: 374px) {
.entry table td {
font-size: 12px;
}
}
上記は「entryというクラス名の付いた箱の中にあるテーブルのtdのフォントサイズを調整する」場合の例です。
iPhone 6 Plusのディスプレイ幅が414ピクセル、iPhone 6のディスプレイの幅は375ピクセルなので、上記のようにディスプレイ幅より1ピクセル引いた値を書きます。
パソコンやタブレットとiPhone 6 Plusはフォントサイズ16ピクセル、iPhone 6 Plusよりディスプレイが小さければ14ピクセル、iPhone 6より小さければ12ピクセル、という具合です。
最後に
CSSに数行追記するだけで、より一層ユーザーに親切なサイトを作ることができます。
一歩踏み込んだデザイン調整が必要な際にはぜひご活用ください。