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

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

For Example I can write css for specific

@media only screen and (width : 1024px) and (orientation : landscape) {

.selector1 { width:960px}


Now I want to only run some javascript if it match the same conditions


@media only screen and (width : 1024px) and (orientation : landscape) {

A javascript code here


I have a external javascript for example and it should be only run on specific screen size and orientation



You can use window.matchMedia():

Test a mobile device media query

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?

Test landscape orientation

if (matchMedia('all and (orientation:landscape)').matches) {
  // probably tablet in widescreen view

Currently supported in all modern browsers (more details)

Polyfill for old browsers:


...I want to run a javascript only if max-width of browser is 1900px and min-width is 768

EDIT: Actually, that was all wrong. If you're using a mobile device, use:

function doStuff(){
    landscape = window.orientation? window.orientation=='landscape' : true;

    if(landscape && window.innerWidth<1900 && window.innerWidth > 768){
        //code here

I can think of a quick solution: Apply some styles conditionally to an invisible div, and check if they are applied with javascript:

div#test { display: none }
@media only screen and (width : 1024px) and (orientation : landscape) {
    div#test { background-color: white; }
if(document.getElementById('test').style.backgroundColor == 'white')

It's probably worth mentioning that there is the orientationchange event that you might want to hook into like so:

$('body').bind('orientationchange', function(){
    // check orientation, update styles accordingly

I know that about this event being fired by mobile Safari, you'd have to check about other browsers.


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  


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); 

The simplest way I found is to get the width of our page; then to conditionally use it.

var x = document.documentElement.clientWidth;
if (x < 992)            = "yellow";


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.