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的360px，三星S3，笔记3等，但这是真的吗？这对于字体大小和图像来说并不好，因为这些设备具有更高的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 devs https://developer.chrome.com/multidevice/webview/pixelperfect

的好指南

背景图象模糊在移动设备上

1 个答案: