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

Question

我一直在使用

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

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

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

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

但它似乎根本没有注册。

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

Answer 1

您可以使用 orintation 媒体查询：

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