视口 iphone4/4s 和媒体查询

Question

我有一个网站，我创建了一个分辨率为 480 像素的媒体查询。 iphone 4 正确地选择了这个版本，但由于某种原因，它悬在页面上，它没有使用 iphone 4 的实际分辨率，它的宽度为 640 像素，而使用了 320 像素的宽度。 （我在某处读到它是为了向后兼容为 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 没有同类产品。

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

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

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

如果您走这条路线，使用 % 和 EM 扩展网站上的所有内容，从长远来看可能会为您节省大量工作。