Мне нужно проверить, является ли разрешение пользователя <1300px или> 1300px, и если он загружает макет с горизонтальными divs и загружает макет с вертикальными divs, то есть 1300px.
Шаблон такой же, мне нужно только поставить один div в горизонтальном или вертикальном положении, зависящем от разрешения.
Поскольку я не могу это сделать с PHP, мне нужно сделать это с помощью javascript, поэтому мне придется использовать функцию "load", чтобы загрузить часть моего шаблона, где находится вертикальный или горизонтальный div? Я использую структуру Yii
Для этого вы можете использовать CSS-запрос:
// For screen < 1300px
@media screen and (max-width: 1300px) {
.foo {
...
}
}
// For screen > 1300px
@media screen and (min-width: 1300px) {
.foo {
...
}
}
В JavaScript вы можете обнаружить это путем:
window.screen.availHeight
window.screen.availWidth
в то время как в CSS вам нужно использовать медиа-запросы:
@media screen and (min-width: 1200px)
Обычно такое происходит в домене CSS (через медиа-запросы), а не в домене JavaScript.
Однако вы можете использовать screen
объект, чтобы получить размеры экрана пользователя:
var width = screen.width; // Or screen.availWidth;