CSS響應式設計 - 檢測人像顯示

Question

我知道純CSS可以根據屏幕尺寸調整樣式表，如下所示：

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

^{（ 來源 ）}

是否可以使用純CSS來檢查橫向或縱向顯示？

Answer 1

是的，使用以下語法：

@media all and (orientation: landscape) {}

有關更多信息，請參閱w3規范 。

Answer 2

您可以使用方向 ：

@media all and (max-width: 959px) and (orientation : portrait) {
    /* Styles */
}

Answer 3

從w3 ：

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Answer 4

所有答案都不正確。 當鍵盤顯示時，Android將從縱向切換到橫向。

不同的鍵盤也需要測試，因為它們可以占用更多的垂直空間。 Swift鍵盤占用更多的垂直空間，因此您無法使用@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}因為這會在很多手機上失敗。

唯一的解決方案是使用javascript。

在較新的Android設備上，您可以測試並使用新的window.screen.orientation api。

在iOS上你可以使用window.orientation工作正常。 即Math.abs( window.orientation ) === 90是風景

作為后備，您可以使用window.screen.width > window.screen.height ，它將覆蓋不支持新窗口的舊Android設備.screen.orientation api

然后，您需要做的就是在resize / orientationchange事件上添加/刪除一個類。

/* Android Orientation */
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation || null;

    /* Check */
    if ( orientation && orientation.type ) {

        /* Landscape */
        if ( orientation.type === 'landscape' || orientation.type === 'landscape-primary' || orientation.type === 'landscape-secondary' ) {
            return 'landscape';

        /* Portrait */
        } else {                                
            return 'portrait';
        }

    }