檢測屏幕分辨率並修改布局

Question

我需要檢查用戶的分辨率是<1300px還是> 1300px，是否小於1300px才能加載水平div的布局，是否大於1300px來加載垂直div的布局。

模板是一樣的，我只需要根據分辨率將一個div放在水平或垂直位置即可。

由於我無法使用PHP執行此操作，因此必須使用javascript進行操作，因此必須使用“加載”功能加載模板的一部分，該模板的垂直或水平div是什么？ 我正在使用Yii框架

Answer 1

通常，這種事情在CSS域中（通過媒體查詢 ），而不在JavaScript域中。

不過，您可以使用screen對象獲取用戶屏幕的尺寸：

var width = screen.width; // Or screen.availWidth;

Answer 2

您可以為此使用CSS媒體查詢：

// For screen < 1300px
@media screen and (max-width: 1300px) {
    .foo {
        ...
    }
}

// For screen > 1300px
@media screen and (min-width: 1300px) {
    .foo {
        ...
    }
}

Answer 3

在JavaScript中，您可以通過以下方式檢測到它：

window.screen.availHeight
window.screen.availWidth

而在CSS中，您需要使用媒體查詢 ：

@media screen and (min-width: 1200px)