Javascript - Emulate CSS Media Queries?

Question

In my CSS file I have this:

@media (max-width: 480px) {
  div {
     background: red;
  }
}

Emulate with javascript

Is there a way to emulate 480px device width with Javascript? I'm thinking of a button with click event to make the CSS beleve the device with is max 480px width.

I will be using jQuery for it if it's possible to emulate media queries.

Answer 1

You can set the viewport manually in JS, which could be the solution. This SO question covers it Dynamic viewport

Set the content attribute to include a width parameter:

document.getElementById("viewport").setAttribute("content", "width=1024, initial-scale=0, maximum-scale=1.0, minimum-scale=0.25, user-scalable=yes");

from http://www.wearecube.ch/how-to-do-responsive-optout-by-setting-the-view-port-with-javascript-or-ruby-on-rails/