采取了哪些方法来确保在所有移动设备中正确呈现移动 Web 图像？

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%。