iPhone 4陷阱最大宽度：480px媒体查询

Question

分辨率为 640×960 的iPhone 4属于以下指定的媒体查询：

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

此媒体查询位于我的CSS样式表的 end ...

上方此查询适用于iPad（1024）和桌面等等...

我错过了什么？

我希望iPhone4能够回应之前在样式表中指定的媒体查询，目标为：（最大宽度：640px），当然......

对于记录，我的viewport标签目前是：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 1

你混淆了css px和display px。这是可以理解的，因为它们都以px衡量。叹息。

从css的角度来看，视网膜显示器的宽度仅为320px。然而，它的像素比为2意味着css-land中的每1px在显示器上实际上是2px。

Taken from here您可以使用其他选择器来识别视网膜显示：

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}