So, I'm wondering if this approach will be possible with jQuery and if so, anything that could guide me in the direction to figuring this out would be great.
I'm creating a web app that is a fixed window (i.e. no browser scrolling, main page focus doesn't need to be scrolled, and for items that do need it, they have scrollable divs), so there is specific ratio of the width/height. In this case, the ratio is 16:9. All the elements within are percentages and essentially all derive from the outer most container. I need my outer container to be responsive based on the size of the browser window. I was hoping I could use jQuery for this.
While most responsive designs focus on just the width, I need to make sure both width and height play a role. In fact, depending on the screen size / browser window, height could be the defining factor.
There are two approaches that need to be taken and they depend on the browser window aspect ratio.
If the ratio is greater than 16:9 or 1.78 (i.e. 16:8 or 2), I will need the height of my outer container to match that of the browser window and for the width of my outer container to then be based upon that height (i.e. height * 1.78).
If the ratio is less than 16:9 or 1.78 (i.e. 16:10 or 1.6), I cannot take the above approach, as the height * 1.78 will result in a outer container that is too wide for the browser window. Therefore, I would need to use the width in this case and then use that to base the height (i.e. width / 1.78).
The rest of my CSS should follow suit as it's percentage based and I'll then have a perfectly responsive out container that scales based on browser window size.
I really am not sure how to approach this but at least wanted to know if it was possible. Considering I can work the if / else statements out in my head, it seems so, but I'm not terribly good with jQuery and wanted to get some advice before tackling. Thanks!