お世話になります。稚拙な質問にて恐縮でございます。
どなたかお詳しい方がいらっしゃいましたらご助言等頂ければと存じます。

カスタマイズを施しスマートフォンサイトを製作する場合、例えばiphoneや他のスマートフォンなど様々な機種に対応させるべくデザインの構成をしなければならないと思うのですが、横幅は何ピクセルに設定するのが一般的なのでしょうか。

iphone用にサイトを作っておりましたら。他のスマートフォンではバックグラウンドが短かったり、あるいはスマートフォン自体を横にして閲覧した場合、バックグラウンドが短くなったりします。

何卒宜しくお願い申し上げます。

pxで指定するのではなく、

width: 100%;

とすれば良いのではないでしょうか。

yosako様

ご教授感謝いたします。例えば私の場合ヘッダー領域にバックグラウンドを設定したく、common.css内の記述に以下の様な設定を致しております。bg.jpgというimgファイルはiphoneにはフィットするのですが、横向きで見たり、他のスマートフォンで見るとやはり横幅が短くなってしまいます。何か打開策はございますでしょうか。

/* ヘッダーロゴ
------------------------------------------------ */
header {
width:100%;
background: #FFF;
background:url(htt://www.com/html/user_data/packages/sphone/img/common/bg.jpg);
height:74px;
margin: 0 auto;
padding:0px 0 0px 0;
clear:both;
min-height:40px;}

repeat-x は効かないですかね？

----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当：田中利宏

tanaca様

アドバイス心より感謝いたします。

私のヘッダーバックグラウンドは左端と右端の色が異なっておりまして、repeat-xとは恐らくバックグラウンドが短ければ同じバックグラウンドをとなりに配置するものかと推察されますが、明らかに二つの違う（同じものですが）バックグランドが配置された様に見えてしまうと考えられます。

申し訳ございませんが、更なるアドバイスがございましたら何卒宜しくお願いもうしあげます。

試していませんが、backgroundで画像を指定するのではなく、
html側で
<div Id="header">
<img ....>
</div>
としておき、CSS側を
header {
width:100%;
background: #FFF;
height:74px;
margin: 0 auto;
padding:0px 0 0px 0;
clear:both;
min-height:40px;
overflow:hidden;
}
header img{
width:100%;
}
としたらどうでしょうか。

あるいは、CSS3を使用して、
background: url(xxxxxx/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
を追加してみてください。これで、縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小することができると思います。

ただしこれは、IE9以上、Firefox 3.6以上、Safari 3以上、Opera 10以上、Chromeにしか対応していません。