Targeting and Div position issue on orientation change using jquery
<p>I'm having trouble targeting the iPad in portrait mode and also getting a div to be positioned correctly when some JS runs in one orientation and the iPad is then rotated to another..</p>

<p>The jQuery is as follows;</p>

<pre><code>var viewportWidth = $(window).width() &lt; $(window).height(); //detect the iPad in Portrait orientation(?)
var popupHeight = $('.selector').height();
if (viewportWidth &lt; 769) { // less than 769px for portrait
    $('.selector h3:first-child').toggle(function () {
        $(this).parent().animate({ 'height': popupHeight + 45 }, 250);
    });
}
</code></pre>

<p>This should detect the iPad in portrait mode and when clicked the animate method should run.</p>

<p>However when the iPad is rotated to landscape the selector div does not return to it's original position (its approx 45px to high). Also this code runs in landscape mode which I don't want as it causes layout issues...</p>

<p>I've tried a landscape specific media query for the iPad, but this has not worked.</p>

<pre><code>@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    .selector {
        top: 0;
    }

}
</code></pre>

<p>Does anyone have any ideas why this code is running in both orientations and what I need to do to get the landscape orientation to display correctly?</p>

<p>Thanks in advance</p>
