SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question No Resize of Website on Device Rotation

    I am currently building a responsive website which I decided to test on my Galaxy Ace 2. I am using media queries to change various elements at different window / browser sizes. One such change triggers between the portrait and landscape sizes on my Ace 2. If I view my website in landscape orientation and then rotate to portrait, the Ace 2 sometimes keeps the CSS used in landscape mode, and vice versa.
    The only solution I have found is to reload the window:
    Code JavaScript:
    window.onresize = function(event)
    {
        document.location.reload(true);
    }
    But this creates a delay every time the device is rotated.

    Is there anything I can do about this?

    Thanks,
    TM.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The above also doesn't work well because it forces a page refresh on scrolling too.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From reading elsewhere online (http://moduscreate.com/orientation-c...e-android-bug/) it appears it may have someting to do with the viewport meta tag not being reset on device orientation. However, the fix they suggest doesn't work (even after corrected the missing bracket from their code).
    The other weird thing about it is that the bug only occurs when you follow this sequence:
    1) Load website in portrait (displays fine with zoom disabled).
    2) Rotate to landscape (displays fine with zoom disabled).
    3) Rotate back to portrait (displays as it would in landscape with zoom enabled).

    If you load the website in landscape then rotate, it displays fine, no matter how many rotations you perform.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •