Detect change in window height and width with event listener
<p>Basically, I'm doing a matching game with tables of different orientation. If browser is resized to landscape or mobile device is turned, I make it a horizontal table. If portrait, then vertical table. I sorta need an event listener to detect if portrait or landscape. </p>

<p>Given 2 problems which can either be solved together or using separate code.</p>

<p><strong>Problem 1</strong></p>

<p>I'm viewing my page on a desktop and I resize my window such that width=768px and height=767px, then activate landscape mode.</p>

<p>Is there an <strong>event listener</strong> that determines whether it should display the portrait or landscape version of a page just simply by</p>

<pre><code>if(window.innerHeight &gt; window.innerWidth) {
    portrait = true;
    /*display to portrait version of page*/
}
else {
    portrait = false;
    /*display to landscape version of page*/
}
</code></pre>

<p>or do I have to create a custom event listener and in that case how?</p>

<p><strong>Problem 2</strong></p>

<p>I'm viewing my page on a mobile device. When it detects it's in landscape mode by turning, activate landscape mode.</p>

<p>I believe this can be solved by</p>

<pre><code>window.addEventListener("orientationchange", function() {
/*display landscape/portrait version*/
}, false);
</code></pre>