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

Question

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

Answer 1

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

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

如果您只想定位iphone,则必须将分辨率或dppx密度添加到这些MQ.

Answer 2

你可以做到这一点

<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 3

如果我理解正确,并且你想知道媒体查询只针对智能手机这样的智能手机,只有当水平握住它时,请尝试以下方法:

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

    }
}