How to reload the webpage when orientation changes?

Question

I'm trying to trigger an event with jQuery mobile that automatically reloads the page when the device's orientation changes. I have media queries written with max-device-width, orientation:landscape, and orientation: portrait. Since the <video> wont scale properly...the only solution I can think of is to refresh the page to the correct media query with the device is rotated.

How do I go about doing this? Thanks.

Answer 1

Thanks guys who answered but I found this and used this and it worked perfectly.

<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0:
                case 90:
                case -90: window.location.reload(); 
                break; } 
    };

Answer 2

How about this?

$(window).on('orientationchange', function(e) {
     $.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
});

It would be best to namespace that orientationchange event to a specific page.

jQM docs on orientationchange event