css - 采取什么方法来确保移动网络图像在所有移动设备中正确呈现？

Question

使用 CSS 和两个不同的图像实例，我能够实现我希望在两个不同的移动设备上看到的结果。对于使用 320 屏幕宽度的设备，我将图像实现为 image1.png。对于最新的设备，例如 iPhone4(Retina 显示屏)，我将图像实现为 image1@2x.png。这需要一个 normal.css 样式表以及一个使用

调用的 hirez.css 样式表

<link href="theme/hirez.css" rel="stylesheet" type="text/css"
    media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" />

但是，这些新的 Amoled/Super Amoled 手机对这些 2x 图像的渲染非常差；它使所有 2x 图像都出现像素化。

我想弄清楚我做错了什么...每个文件名都有 2 组图像，并调用正确的 css 表...任何帮助将不胜感激。

Answer 1

您应该简单地使用高分辨率图像并在页面上以其高度和宽度的 50% 显示它。