0

我一直在使用

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

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

如何确定视口是否确实是垂直的(即较小宽度的视口)?我试过了

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

但它似乎根本没有注册。

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

4

3 回答 3

3

您可以使用 orintation 媒体查询:

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
于 2012-07-04T13:43:33.577 回答
0

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

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

于 2012-07-04T13:44:31.190 回答
0

我知道你想用 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'; 
}
}
于 2012-07-04T13:46:42.397 回答