0

I'm new with Responsive Webdesign.

Now working with media-queries I've made myself these code-snippet for the write the browser-width to the console while resizing it. 

(function () { 
  window.addEventListener('resize', function() {
    console.log('Current width : %s', document.body.clientWidth);
  });
})();

What I'm trying to do is getting information where to set my breakpoints.

The JavaScript works fine. But I'm not sure if I'm asking the optimal property.

Therefore question to the more experienced devs:

What property of which object should I query for solving the task finding breakpoints?

mewi
  • 539
  • 1
  • 4
  • 11
  • check this, you will see many options here http://stackoverflow.com/questions/18575582/how-to-detect-responsive-breakpoints-of-twitter-bootstrap-3-using-javascript – Deep Jul 07 '16 at 07:22

2 Answers2

1

If you really want to use JavaScript, then use window.innerWidth.

That is the inner width of the window, while document.body.clientWidth could be smaller: it depends on the width of the body.

But usually people use CSS media queries. That makes makes more sense because this is why they exist. So if you can, use them instead.

trincot
  • 317,000
  • 35
  • 244
  • 286
user6559544
  • 11
  • 1
  • *"But usually people use CSS media queries..."* Did you read the question? That's what the OP is doing. This is about finding what breakpoints to use in them. – T.J. Crowder Jul 07 '16 at 07:35
1

Yes, we can use document.body.clientWidth for getting the entire width of the browser. It is the core javascript method to fetch the width, this can be also used to fetch the specific element with. If you are using jQuery, can try with $(window).width() to get the window width. Since you have mentioned that you are new to the responsive design don't set height unless it is very necessary. Setting height to auto will make life easy in case of responsive web development.

Aswin
  • 43
  • 2
  • 3