CODEWITHSUNDEEP
javascriptcross-browser
John
John

Reputation: 3946

What's the JavaScript equivalent of CSS Media Queries?

I'm experienced in using media queries to target CSS to specific browser sizes/or contexts, but now I'm interested in doing this with JS, essentially having more control over how my scripts run on browsers of different abilities.

I'm not asking for how to duplicate the functionality of media queries in JS, but more what are the methods for controlling which code gets run on which browsers?

Is there a method or system that would give me this control without resorting to detecting browsers?

Upvotes: 0

Views: 782

Answers (4)

mtwallet
mtwallet

Reputation: 5086

This allows you to define breakpoints for a responsive design, and then will fire custom events when the browser enters and/or exits that breakpoint.

http://xoxco.com/projects/code/breakpoints/

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

There really isn't anything to control how where your code is run unless you do some ground work in detecting the situations you want the code to run in and wrapping things in if blocks. You can use conditional statements in HTML, if blocks in your generating server code, or in the js itself.

Upvotes: 0

user748221
user748221

Reputation:

4+ levels of indirection are not necessary.

var width = typeof innerWidth === 'undefined' ? document.body.clientWidth : innerWidth;
if (width > 900) {
  // do something
}

Upvotes: 0

Ram
Ram

Reputation: 144679

multiple if statements:

if ($(window).width() > 900)) {
   // do something here
}

Upvotes: 1

Related Questions