媒体查询 - 仅适用于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

如果我理解正确，并且您想知道媒体查询只针对像iPhone这样的iPhone智能手机，请尝试以下方式：

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

    }
}

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 */
}

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