Detect screen resolution and modify layout

Question

I need to check whether user's resolution is <1300px or >1300px and if it is <1300px to load layout with horizontal divs and if it is >1300px to load layout with vertical divs.

Template is the same I only need to put one div in horizontal or vertical position depening on resolution.

Since I cannot do it with PHP, I have to do it with javascript, so I would have to use "load" function to load part of my template where is vertical or horizontal div? I'm using Yii framework

Answer 1

Typically this sort of thing is in the CSS domain (via media queries ), not the JavaScript domain.

You can use the screen object , though, to get the dimensions of the user's screen:

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

Answer 2

You can use CSS media query for that:

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

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

Answer 3

In JavaScript you can detect it by:

window.screen.availHeight
window.screen.availWidth

while in CSS you need to use media queries :

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