在 iphone 4/4s 上显示网页

Question

我有一个网页，我创建了一个分辨率为 480 像素宽度的媒体查询。

iphone 4 正确地选择了这个版本，但由于某种原因它悬垂在页面上，它没有使用 iphone 4 的实际分辨率，即 640px 的宽度，它使用 320px 的宽度。 （我在某处读到它这样做是为了向后兼容为 iphone 3 开发的应用程序）

有没有办法使用视口或媒体查询来纠正这个问题？或者有人有一个如何实现 iphone 媒体查询的例子，我试过这个没有运气。

有没有办法拉伸 480px 媒体查询以适应 iphone？

这是我当前的视口：

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

媒体查询 - 这没有任何作用，我只尝试了 -webkit-device-pixel-ratio: 2

@media screen  and (max-width: 480px) and (-webkit-device-pixel-ratio: 2) {}

Answer 1

css3 中的这个媒体查询应该检测到任何 iphone 或 ipod

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2)

我的理解是，视网膜屏幕仍然会像普通的旧屏幕一样工作。你表现得好像东西仍然是 320px 是宽度。如果你想让某些东西在纵向中占据 iphone 的整个宽度，那么你会使用 320 像素而不是 640 像素。确实，您应该使用百分比和 em，尽管不是精确的 px 大小。

不确定这是否回答了任何问题，但我想你想知道为什么如果你将某些东西设置为 640 像素，它会挂在边缘，而不仅仅是占据视网膜屏幕的宽度。