Обнаружить разрешение экрана и изменить макет

Question

Мне нужно проверить, является ли разрешение пользователя < 1300px или> 1300px, и если это < 1300px для загрузки макета с горизонтальными div, а если это> 1300px для загрузки макета с вертикальными div.

Шаблон такой же, мне нужно только поставить один div в горизонтальном или вертикальном положении, зависящем от разрешения.

Поскольку я не могу сделать это с помощью PHP, мне нужно сделать это с помощью javascript, поэтому мне придется использовать функцию «загрузить», чтобы загрузить часть моего шаблона, где находится вертикальный или горизонтальный div? Я использую Yii framework

Answer 1

Вы можете использовать CSS медиа-запрос для этого:

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

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

Answer 2

Обычно такого рода вещи находятся в домене CSS (через media queries), а не в домене JavaScript.

Вы можете использовать screen object, хотя, чтобы получить размеры экрана пользователя:

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

Answer 3

In JavaScript you can detect it by:

window.screen.availHeight 
window.screen.availWidth 

, в то время как в CSS вам необходимо использовать media queries:

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