html - viewport iphone4/4s 和媒体查询

Question

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

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

这是我当前的视口(viewport):

<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

视口(viewport)元“target-densitydpi=device-dpi”目前仅适用于 android 平台。就目前而言，没有适用于 iOS 的等效产品。

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

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

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

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