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

Question

相同的方法是否只适用于 iPhone 的横向模式下编写 CSS？

Answer 1

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

@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 等智能手机时的媒体查询，请尝试以下操作：

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

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