jquery - 移动设备上的背景图像模糊

Question

我正在尝试在 Bootstrap 上创建一个响应式网站，并为我的整个网站使用背景图片。我正在使用我的背景图片并将其设置为无“重复中心固定中心”和背景大小为“封面”，如下所示:

body{

            background: url(img/LandingPageIcarus.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;

        }

所以这在 Chrome、Firefox、IE 中看起来不错，但是当我用任何移动设备打开它时，背景图像真的很模糊。我尝试了来自不同来源的许多选项，但没有运气，而且我真的在这里苦苦挣扎，因为这是我的第一个网站。如果有人能阐明一些问题以便我解决问题，我将不胜感激。

手机上是这样的 my site

Answer 1

当我们通过开发者工具模拟器查看任何网站时，手机的像素宽度值在 iPhone5 的 320px、诺基亚 N9、三星 S3、note 3 等的 360px 范围内，但这是真的吗？这对字体大小和图像不利，因为这些设备具有更高的 Dpi，您需要考虑到这一点，对于背景图片的问题，请使用此

@media screen and (min-resolution: 1.5dppx) {
.welcome-header > h1{
  background-image: url('../images/html5_384x384.png');
}
}

@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
  background-image: url('../images/html5_512x512.png');
}
}

为这 2 个 Dppx 范围使用更高分辨率的背景图像

直接来自 chrome 开发人员的好指南 https://developer.chrome.com/multidevice/webview/pixelperfect