viewport iphone4 / 4s和媒体查询

Question

我有一个网站，我创建了一个分辨率为480px宽度的媒体查询。 iphone 4正确地选择了这个版本，但由于某种原因，它突出了页面，它没有使用iphone 4的实际分辨率，宽度为640px，宽度为320px。 （我读到的地方是为了向后兼容为iphone 3开发的应用程序）

有没有办法使用视口或媒体查询来纠正这个问题？非常感谢戴夫

这是我当前的视口：

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=5.0; minimum-scale=0.5; target-densityDpi=device-dpi" />

媒体查询

@media only screen and (max-width: 480px) {
}

Answer 1

视口元“target-densitydpi = device-dpi”目前仅适用于android平台。就目前而言，iOS没有相同的功能。

您可以使用双像素密度媒体查询来实现类似的目标，例如

@media screen and (-webkit-device-pixel-ratio: 2) {}

然后在CSS中缩小所有内容。

如果您使用％和EM缩放网站上的所有内容，那么从长远来看可能会为您节省大量工作。