媒体查询 - 仅适用于 iPhone 横向的 CSS答案

【问题标题】：Media Queries - CSS only for iPhone landscape媒体查询 - 仅适用于 iPhone 横向的 CSS
【发布时间】：2011-11-09 13:25:32
【问题描述】：

在横向模式下，是否仅用于为 iPhone 编写 CSS 的相同方法？

【问题讨论】：

【解决方案1】：

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

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

如果您只想针对 iphone，您必须将分辨率或 dppx 密度添加到这些 MQ。

【讨论】：

【解决方案2】：

你可以这样做

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

这会强制 iPhone 以与设备宽度相同的方式呈现视口。

然后用这个css定位横屏模式，也就是+320pxwide

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

【讨论】：

【解决方案3】：

如果我对您的理解正确，并且您想知道仅在水平握持 iPhone 等智能手机时的媒体查询，请尝试以下操作：

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

    }
}

【讨论】：

【解决方案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 */
}

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

【讨论】：