How to reload a web page when changing orientation?

Question

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

How can I do it? Thanks.

Answer 1

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

 <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 indicate that the changechange event is on a specific page.

jQM docs at changechange event

Answer 3

Please try the following code to redirect the page to an orientation event, its working well for me

 if (window.DeviceOrientationEvent) { window.addEventListener('orientationchange', function() { location.reload(); }, false); } 

thanks

Answer 4

 <script type="text/javascript"> window.addEventListener("orientationchange", function() { console.log(screen.orientation); }, false); </script>