How to use javascript conditionally like CSS3 media queries, orientation?

Question

How to use javascript conditionally like CSS3 media queries, orientation?

For Example I can write css for specific

@media only screen and (width : 10         


        

Answer 1

You could just rewrite the media query as a javascript expression instead:

function sizehandler(evt) {
    ...
}

function orientationhandler(evt){  

  // For FF3.6+  
  if (!evt.gamma && !evt.beta) {  
    evt.gamma = -(evt.x * (180 / Math.PI));  
    evt.beta = -(evt.y * (180 / Math.PI));  
  }  

  // use evt.gamma, evt.beta, and evt.alpha   
  // according to dev.w3.org/geo/api/spec-source-orientation  

  ...
}  

window.addEventListener('deviceorientation', orientationhandler, false);
window.addEventListener('MozOrientation', orientationhandler, false);
window.addEventListener('load', orientationhandler, false); 
window.addEventListener('resize', sizehandler, false); 
window.addEventListener('load', sizehandler, false);