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

Question

我一直在用

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

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

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

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