how to call different jquery actions in responsive design

Question

I\'m at the point to convert my project into an responsive design.

What is the most handy and universal solution do you suggest to implement different jQuery-blocks

Answer 1

If you are targeting modern browsers (IE10 upwards, and not IE mobile), then you should use the new window.matchMedia() method, as discrepancies between all the various browsers as to how they measure scrollbar width means that if you use for example window.width(), there will be a small range of pixels where the CSS behaves differently to the JS (I found this out the hard way).

This article goes in to further details: https://www.fourfront.us/blog/jquery-window-width-and-media-queries

Use something like the following so that your JS and CSS work on exactly the same breakpoints:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide, write code specific for that */
} else {
  /* the viewport is less than 400 pixels wide, write code specific for that */
}

The Mozilla Developer Network has documented this here: https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia