使用CSS确定iPhone Safari是否处于垂直视口模式

Question

我一直在使用

@media screen and (max-width: 480px)

确定用于查看的设备是否为iPhone，但是，此规则似乎适用于垂直和水平视口模式。

如何确定视口是否确实是垂直的（即较小的宽度视口）？我试过了

@media screen and (max-width: 320px)

但它似乎根本没有注册。

此外，(max-width: 480px)限制下的所有样式也会应用于垂直模式。

Answer 1

您可以使用定向媒体查询：

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Answer 2

我认为媒体查询有一个选项“方向”;）

http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Answer 3

我知道你想用CSS做这件事，但CSS真的不是检测iPhone的方法......你应该使用JavaScript。

这将有助于您在JavaScript中检测方向：

function detectOrientation () {  
if ( orientation == 0 ) {  
 document.className = 'portrait';
}  
else if ( orientation == 90 ) {  
 document.className = 'landscape';  
}  
else if ( orientation == -90 ) {  
 document.className = 'landscape'; 
}  
else if ( orientation == 180 ) {  
 document.className = 'portrait'; 
}
}