如何修复模糊图像

我使用Bootstrap创建了此测试登录页：http://ubersnap.netai.net

如果你访问该网站并查看iPhone屏幕截图，你会发现你几乎看不到屏幕上的文字。

但是，如果您只是调整浏览器窗口的大小，并将窗口最大化为其原始大小，则它是100%清晰的。

为什么会发生这种情况？有没有办法在第一次加载图片时使其清晰，而不是调整浏览器窗口的大小？

如果这有什么不同，则该图像为GIF。

---

解决方案

尝试此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) */
}