媒体查询 - 仅适用于iPhone的Css风景

Question

是否只能在横向模式下为iPhone编写css的方法相同？ 谢谢

Answer 1

你可以这样做这

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

这迫使iPhone渲染视口相同的设备宽度。

然后使用这个CSS瞄准风景模式，这是+320px宽

@media screen and (min-width: 321px){ 
    //styles 
} 

Answer 2

如果我理解正确的话，你想知道媒体查询的目标像iPhone智能手机，只有当它保持水平，尝试这样的事情：

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    /* styles go here */ 
    body { 

    } 
} 

Answer 3

是的，当然。检查：http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

如果你想针对iPhone只有你有添加的分辨率或DPPX密度这些MQ。

Answer 4

实际上，如果你使用：

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

则防止用户在任何时间，这可能会导致可用性问题放大。

我会推荐您使用：

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

在这种情况下，强制将显示在您的网页在它的原始的初始规模，这样您就可以指定你的媒体查询不同的布局尺寸，如当你旋转你的iPhone时，布局将被调整大小：

@media only screen and (min-width: 480px) { 
    /* landscape mode */ 
} 

@media only screen and (max-width: 479px) { 
    /* portrait mode */ 
} 

而且用户仍然可以捏住页面进行缩放。

Answer 5

在这里你可以找到所有媒体查询

http://nmsdvid.com/snippets/