Question

我使用bootstrap：http://ubersnap.netai.net

创建了此测试登录页面

如果您访问该网站并查看iPhone屏幕截图，您将看到您几乎无法阅读屏幕上的文字。

但是，如果您只是调整浏览器窗口的大小并将窗口最大化恢复到原始大小，那么它就会非常锐利。

为什么会这样？有没有办法让图片在第一次加载时变得清晰，而不是调整浏览器窗口的大小？

图像是GIF，如果这有任何区别。

Answer 1

尝试使用此css使图像边缘清晰。

.crisp-edges {
    image-rendering: -moz-crisp-edges;
    /* Firefox */
    image-rendering: -o-crisp-edges;
    /* Opera */
    image-rendering: -webkit-optimize-contrast;
    /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* IE (non-standard property) */
}

Answer 2

您需要为不同的屏幕尺寸设置不同的图像。有很多方法可以做到这一点，最简单的方法是使用媒体查询并使用相同图像的不同尺寸/版本。

Some example code sited from smashingmagazine.com:

/* default screen, non-retina */
.hero #cafe { background-image: url("../img/candc970.jpg"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .hero #cafe { background-image: url("../img/candc290.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    .hero #cafe { background-image: url("../img/candc290@2x.jpg"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    .hero #cafe { background-image: url("../img/candc538.jpg"); }
}

Answer 3

刚刚偶然发现了 this。

第一个修复对我有用：

img {
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

如何修复模糊图像

3 个答案: