スマホ用にランディングページを

質問

早速ですが、質問させていただきます。

スマホ向け横幅いっぱいのランディングページを製作中です。
スマホと言えば調べるとさまざまで、
PC用ならば72dpiとする所だとおもいますが、
スマホ用にはどのように設定すればベストでしょうか？
傾けた時のために縦幅に合わせなければならない等あるのでしょうか。

一度試しに自分サイトにあげてみた画像が
ぼやけたような感じになってしまいます。

よろしくお願い致します。

回答No.1

ORUKA1951 · ベストアンサー

＞PC用ならば72dpiとする所だとおもいますが、
　標準は96dpiですけど・・・CSS2.1で、このあたりの曖昧さをなくすために
『基準画素は、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#length-units )』

　そもそも、スマホに限らずmedia=screenのサイズは様々ですから、サイズを固定する事はしません。

＞スマホ向け横幅いっぱいのランディングページを製作中です。
　わざわざスマホ用と言うことも通常はしません。今後、大画面のスマホも普及していくでしょうし。
　単純にbackground-siaze:coverあたりでよいのでは？？
　media-queryを使って背景画像を変えることまではしなくて良いでしょう。
　横幅1000px程度の背景画像を用意して
section{width:80%;min-width:630px;max-width:1000px;margin:0 auto;}
section nav{background-image:url();background-size:cover;}

お礼

ありがとうございます！
お返事遅れまして、申し訳ございません。
おっしゃる通りでして、無事解決致しました！