HTML页面背景图像应显示在固定位置,填满整个屏幕或窗口(在非平板电脑,非智能手机设备上)。
使用ImageShack创建背景图片。到目前为止没有问题。
我创建了一个Plunk来展示当前的进展。
在非视网膜设备(戴尔笔记本电脑)上,图像似乎呈现正常,填满了整个页面背景。
在我的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');
}
});
虽然mcmac's answer带来了一些见解,但这并不是我想要的答案。我只是想了解如何设置背景图像的参数,以便在视网膜屏幕上显示高分辨率图像。
解决方案非常简单。
使用background-size
时,实际图像的大小必须是屏幕的两倍(在每个方向上),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');
作为R3tep suggested而不是背景图像,我可以使用普通的固定图像。在这种情况下,图像的大小必须 - 再次 - 是屏幕上图像大小的两倍,而css必须是height: 100%; width: 100%
。
答案 0 :(得分:5)
你不需要js,你可以使用css Media查询视网膜:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}
iphone和ipad的媒体查询example