iPhone上的媒体查询

Question

我正在尝试使用媒体查询，但是当我访问iPhone时它们无法正常工作。当我调整浏览器窗口的大小时，它工作正常。它们如下所示：

@media (max-width: 480px){...}

我在文件顶部包含以下元标记：

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

知道为什么它不能正常工作？

Answer 1

修改

试试这个：

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

您可以使用this作为iPhone的参考。