适用于 iPhone 5 的媒体查询

Question

我试图通过我的媒体查询来定位iPhone 5，但横向背景没有显示。由于我没有任何用于视网膜显示器的特殊图形，因此我想了解我是否可以对所有媒体查询使用相同的图形。如何定位 iPhone 5 横向？

    @media only screen and (max-width: 480px)
and (orientation : landscape)
{
  #homepage{ 
     background: url('images/480x320_Horizontal.jpg') no-repeat fixed #00314d;
   }
}

Answer 1

使用元标记强制 iPhone 将视口渲染为设备宽度。

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

现在使用媒体查询来设置横向模式的样式，对于 iphone，为>320px;

@media screen and (min-width: 321px){
    /*Style goes here*/
}