ここでは背景画像のサイズが大きく変更されていますが、iPhone ではそうではありません (iPad はチェックしていません)。
画像は 1393 x 1098 ピクセルです。
これが私のcssです：
.slider-wrap-blue {
background:transparent url(/images/fpfbg.jpg) no-repeat center center fixed;
min-width: 980px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
これが答えかどうかはわかりませんが、マークアップに「メタ ビューポート」タグがないことに気付きました。それがなければ、スケーリングはデスクトップと同じであり、これがうまくいかない可能性があります. 見るためのiPhoneを持っていません。Androidにも問題がありますか？
編集：コメントの1つで言及しています。完全なメタ タグは次のとおりです。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
いくつかの観察。doctype の前に広告/コメントがあります。これにより、IE が quirks モードになります。この問題を解決するには、doctype の前にあるものをすべて削除してください。
また、XHTML1.1 doctype を使用しています。これは XML アプリケーション専用であり、ページを HTML として提供しています。HTML doctype を使用します。
画像が初期サイズ以下に縮小できないという問題がありました。1393 x 1098 まで縮小されているかもしれませんが、これ以上縮小されることはありません。携帯電話用に小さいバージョンの画像を使用し、タブレットやデスクトップ デバイス用に大きいバージョンの画像を使用しています。ユーザー エージェントを使用して、Web ページが実行されているデバイスを特定し、適切な画像を表示します。
私はこれを回答ではなくコメントとして分類しますが、まだコメントを残すという評判はありません:)
古いデバイスでも同様の問題がありました。画像をjpgからpngに変更したところ、背景サイズの問題が修正されました。
おそらくBackstretchのような jQuery プラグインを試してみてください。クロスプラットフォームのより良い答えになるはずです。