状況
HTML ページの背景画像は固定位置に表示し、画面全体またはウィンドウ全体に表示する必要があります (タブレットやスマートフォン以外のデバイスの場合)。
背景画像はImageShackを使用して作成されます。これまでのところ問題はありません。
現在の進捗状況を示すためにプランクを作成しました。
問題
Retina 以外のデバイス (Dell ノートブック) では、画像が正常にレンダリングされ、ページの背景全体が塗りつぶされているように見えます。
私のiPhone（網膜）では、画像は高解像度画像として明確に表示されません。
私の現在の解決策
この例で使用される JavaScript コードは次のとおりです。
function isRetina() {
return window.devicePixelRatio > 1;
}
$(document).ready(function() {
var url = "http://farm8.staticflickr.com/7398/11622056325_08e35bd803_o_d.jpg";
var b = $('body'), w = $(window), width = w.innerWidth(), height = w.innerHeight();
$('#retina').text('Is ' + (isRetina() ? '' : 'not') + ' retina.');
$('#size').text(width + " x " + height);
b.css('background-image'
, 'url(http://imagizer.imageshack.us/'
+ width
+ 'x'
+ height
+ 'f0/'
+ url
+ ')');
if (isRetina()) {
b.css('background-size', (width / 2) + 'px ' + (height / 2) + 'px');
}
});
質問
- 高解像度の「網膜」背景画像を設定するには、どの CSS 設定を使用する必要がありますか?
- iPhone の (表示されている) 画面全体を満たす背景画像を作成するにはどうすればよいですか?
更新：私の解決策
mcmac の回答はある程度の洞察をもたらしましたが、それは私が探していた回答ではありませんでした。Retina 画面に高解像度の画像を表示するために、背景画像のパラメーターを設定する方法を理解したかっただけです。
解決策は非常に簡単です。
a) background-size の使用
を使用する場合background-size、実際の画像は画面の 2 倍のサイズ (各方向) である必要があり、background-sizeプロパティは画面のサイズである必要があります (私が行ったこととは対照的に: 画面の半分のサイズ):
b.css('background-image', 'url(http://my.image.url.com/size' + (width * 2) + 'x' + (height * 2) + ')');
b.css('background-size', width + 'px ' + height + 'px');
b) 固定画像の使用
R3tepが提案したように、背景画像の代わりに、通常の固定画像を使用できます。その場合、画像のサイズは画面上の画像のサイズの 2 倍にする必要があり、CSS はheight: 100%; width: 100%.