我正在尝试为移动网站保存图像。我正在为 iPhone 4 保存一个招聘文件（宽度 640 像素）和一个低分辨率（宽度 320 像素）。如果我在 Safari 移动设备中查看 jpg 图像，它会显示全宽（纵向模式）。如果我将它用作 CSS 中的背景图像，它会占用大约 2/3 的屏幕（纵向模式）。
我正在使用此代码来检测视网膜屏幕
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) {
#header
{
background:url(images/hires/header.jpg) no-repeat;
width:640px;
height:257px;
}
}
唯一能解决的就是：
<meta name="viewport" content="width=640" />
在我的 HTML 标头中。但是，对于宽度为 540 像素的 Atrix 2 之类的东西，这将完全不适用。我试过了：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
然后图像大约是屏幕宽度的两倍（纵向模式）。
我一生都无法弄清楚我做错了什么，或者如何迎合每部手机/分辨率/屏幕尺寸。