apply classname (css) based on screen resolution

Question

I have a problem when I am working on resolution base application.

If I have 1024 by 768 resolution my application should be 100% (table Layout). If I have above 1024 by 768 resolution the application should be in center align (table width is 80%).

function MOSTRA() {
    var SCR = screen.availWidth;
    var BRW = window.outerWidth;
    if (BRW < SCR) {
        document.getElementById('sample').className = 'maintable';
    } else {
        document.getElementById('sample').className = 'maintable1';
    }
}
window.onresize = MOSTRA;
window.onload = MOSTRA;

I have used the above code but this is not working.

Hi all i have checked with putting alert in required place. Now i know where the problem is occurring in window.outerWidth it seems because when i alert in that area i am getting undefined in IE. It seems Ie is not supporting outerwidth. I have taken the above code from the below link.

http://jsfiddle.net/Guffa/q56WM/

Please helpe me.

This is a urgent issue

Thanks in advance

Answer 1

Use CSS3 Media Queries :

@media screen and (min-width: 1024px) and (min-width: 768px)
{
  /* Center table! */
}

Also possible:

<link rel="stylesheet" media="screen and (min-width: 1024px) and (min-width: 768px)" href="example.css" />

JS variant (because OP didn't want CSS 3):

if (window.screen.width >= 1024 && window.screen.width >= 768) {
  document.head.innerHTML += '<link rel="stylesheet" href="centerTable.css" type="text/css" />'
}

Answer 2

务实地包括基于显示宽度的样式表，媒体类型： http ： //www.w3.org/TR/css3-mediaqueries/