Refreshing page automatically when viewport size change

Question

I'm using responsive and adaptive media queries for my website to accommodate smartphones...Now the problem is that my max-width mobile query ends at 480px, which is most phones rotated display width (when the phone is on its side...). Now some phones, like the HTC desire have a max screen width of 533px, now when the user first loads the page on vertical position (320px screen width) and he/she rotates rotates the screen to 533px width, it goes past my design specifications and it looks kinda crappy...(since the layout was meant for 480px max...)

Now the only way to solve that is to refresh the page once the viewport dimensions change. How do I force a refresh?

Thank you

Answer 1

if device rotate window resized.

window.onresize = function(event)
{
document.location.reload(true);
}