0

我正在尝试为移动网站保存图像。我正在为 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">

然后图像大约是屏幕宽度的两倍（纵向模式）。

我一生都无法弄清楚我做错了什么，或者如何迎合每部手机/分辨率/屏幕尺寸。

4

1 回答 1

0

好的，这似乎解决了它，无法在 iPhone 4 和 iphonetest.com 以外的其他设备上尝试它

（initial-scale=.5 是有帮助的）不确定它的作用

于 2012-05-10T15:42:07.733 回答