我一直在使用
@media screen and (max-width: 480px)
但是,要确定用于查看的设备是否是 iPhone,这条规则似乎适用于垂直和水平视口模式。
如何确定视口是否确实是垂直的(即较小宽度的视口)?我试过了
@media screen and (max-width: 320px)
但它似乎根本没有注册。
此外,位于(max-width: 480px)
限制下的所有样式也适用于垂直模式。
我一直在使用
@media screen and (max-width: 480px)
但是,要确定用于查看的设备是否是 iPhone,这条规则似乎适用于垂直和水平视口模式。
如何确定视口是否确实是垂直的(即较小宽度的视口)?我试过了
@media screen and (max-width: 320px)
但它似乎根本没有注册。
此外,位于(max-width: 480px)
限制下的所有样式也适用于垂直模式。
您可以使用 orintation 媒体查询:
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}
我认为媒体查询有一个“方向”选项;)
http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
我知道你想用 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';
}
}