我有一个网页，我创建了一个分辨率为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) {}
答案 0 :(得分：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的全宽，那么你将使用320px而不是640px。真的，你应该使用百分比和ems，虽然不是精确的px尺寸。
不确定这是否有任何答案，但我认为你想知道为什么如果你设置的东西为640px它会悬挂在边缘而不仅仅占用视网膜屏幕的宽度。