■iPhone/PC互換サイトの画像処理に関して

質問

■iPhone/PC互換サイトの画像処理に関して

会社のHPをiPhoneとPC両方に対応するようCSSをiPhone用、PC用に分けて2つ作りました。
scriptでiPhone、PCどちらからの接続かによって使用するCSSを振り分けるかたちになっています。

そこで画像に関しては最初1つの画像を用意し、CSSによって画像サイズを変更するようにしたのですが、
iPhoneで確認したところ大きいサイズの設定(ここではPC向けに設定した画像サイズ)が優先され、
折角iPhone向けのCSSを用意しても、元の画像が大きいのでそれにあわせた表示となり、
意味がなくなってしまいました。

それから、画像データを直接imgで指定するのではなく、background-imageとして、
背景に指定することにしました。
この場合PC向けの大きな画像と、iPhone向けの小さい画像2つ用意し、
CSSによってどちらの画像を背景画像として設定するかを指定しました。

例）
【PC用】
h2 {
background-image: url(images/subtitle_p.jpg);
height: 53px;
width: 700px;
background-repeat: no-repeat;
text-align: center;
margin-right: auto;
margin-left: auto;
}
【iPhone用】
h2 {
background-image: url(images/subtitle_i.jpg);
background-repeat: no-repeat;
height: 23px;
width: 310px;
text-align: center;
margin-right: auto;
margin-left: auto;
}

これは結果巧くいったのですが、h1とh2にこの動作を指定した後、
別の画像を同じように設定しようとしたところ、
iPhoneから見ると急にまた大きなサイズの画像が優先されるようになってしまいました。

CSSの書き方等は全く同じで、同じ画像を使用しても、大きなサイズの画像が表示されます。

原因が分からず困っています。
解決方法をご存知の方はご教示のほど宜しくお願いします。
また、画像を背景指定して使い分ける方法以外に、
もっと良い方法をご存知でしたらそちらも併せてお願いします。

回答No.1

tracer · ベストアンサー

検証したわけではないので、思いついたことを書きます。

・そもそもJSの振り分け動作は確実に行われていますか？

・phpなどを使える環境であれば、JSではなくPHPで振り分けして、異なるHTMLを吐いたほうが確実です。

・CSSによるbackground-imageを使われるのであれば、iPhoneではCSS3のbackground-sizeが使えるはずです。(画像を2つ用意する必要がない)

・JSを使われるのであれば、iPhoneにはデベロパーツールがあるので、いろいろ検証できます。(環境設定 > Safari > デベロッパー)