1

情况

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');
  }
});

问题

  1. 应该使用哪些 CSS 设置来设置高分辨率的“视网膜”背景图像？
  2. 如何在 iPhone 上创建填充整个（可见）屏幕的背景图像？

更新：我的解决方案

尽管mcmac 的回答带来了一些见解，但这并不是我想要的答案。我只是想了解如何设置背景图像的参数，以便在视网膜屏幕上显示高分辨率图像。

解决方案非常简单。

a) 使用背景尺寸

使用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');

b) 使用固定图像

正如R3tep 建议的那样，我可以使用普通的固定图像代替背景图像。在这种情况下，图像的大小必须是屏幕上图像大小的两倍，并且 css 必须是height: 100%; width: 100%.

4

1 回答 1

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 的媒体查询示例

于 2014-02-03T14:21:55.670 回答