Question: What im looking to do is create a chatbox that doesn't rely on media queries. That mathematically sets sizes of the chatbox content.

I was experimenting with `$(window).height()/$(window).width()` but that doesn't cover the whole browser window. I wanted to do this all in javascript/jquery without css/media queries

Answer: 
Try this code snippet

```js
(function() {
  window.onresize = displayWindowSize;
  window.onload = displayWindowSize;

  function displayWindowSize() {
    let myWidth = window.innerWidth;
    let myHeight = window.innerHeight;
    // your size calculation code here
    document.getElementById("screen").innerHTML = myWidth + "x" + myHeight;
  };

})();
```

```html
<div id="screen"></div>
```
If you want to set the maxWidth or minWidth browser screen size like media query dynamically in JavaScript and then define styles or anything else, you can use the Window interface's matchMedia() method.
It will return a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.

Ok, the syntax :

```
const pageWidth = window.matchMedia('(min-width: 600px)');

```

and we can use the object that returns in different ways:

```
     const handlePageColor = () => {
    if (pageWidth.matches) {
        document.body.style.backgroundColor = "yellow";
    }
};

```

And finally you should addListener() method to our object, this causes our function to run whenever the browser screen size changes.

```
    pageWidth.addListener(handlePageColor);

```