9

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

DextrousDave
  • 6,603
  • 35
  • 91
  • 134
  • Does this help? http://www.quirksmode.org/dom/events/resize_mobile.html – behnam Aug 20 '12 at 19:40
  • 1
    I would be a pretty upset user if a page had to refresh every time I rotated my phone. That's the kind of thing that will make me close your website and never come back. – Bryan Downing Aug 20 '12 at 19:41

1 Answers1

13

if device rotate window resized.

window.onresize = function(event)
{
document.location.reload(true);
}
ILker Özcan
  • 346
  • 4
  • 11
  • thank you ILker...appreciate. Is there a way to force the screen to rotate (if the device is capable) on a mobile phone? – DextrousDave Aug 20 '12 at 19:53
  • 3
    for some reason on my HTC desire android 2.3.3 native browser that code makes my page refresh continuously... – DextrousDave Aug 20 '12 at 19:57
  • mobile browser has a rotate event but i am not use this. check this out http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript maybe helpful your problem. – ILker Özcan Aug 20 '12 at 20:40
  • solution for continuous refresh on scroll is here: https://stackoverflow.com/a/15455463/1449147 – DimitrisBor Jul 30 '18 at 08:45