left margin when rotate to landscape

Question

I am using a JQuery parallax slider effect. Everything fits the screen on iPad except when I rotate from landscape to portrait there is a about a 120px right margin that pushes my slider content over to the right.

I have tried setting viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

but this did nothing. when I go to the page directly in portrait it is fine. The right margin is only added when I rotate from landscape to portrait. Portrait to landscape resizes appropriately.

here is example demo

Not sure if this will help but try adding "user-scalable=no" no the viewport tag? — Billy Moat, Nov 20 '12 at 13:08

SlashmanX · Accepted Answer · 2012-11-20T13:04:02.770

1

A quick, dirty fix would probably be to execute a method to reset the margins when the onorientationchange event is triggered on the body.

So example code would be as follows:

<body onorientationchange= "fixMargins()">

....

function fixMargins() {
    var orientation = window.orientation;
    switch (orientation) {
        case 0: // portrait 
            $('div').css('margin-right', '40px');
            break;
        case 90: // landscape left
            $('div').css('margin-right', '40px');
            break;
        case -90: //landscape right
            $('div').css('margin-right', '40px');
            break;
        case 180: // portrait upside down
            $('div').css('margin-right', '40px');
            break;
    }
}

Obviously this is not ideal and you would prefer an explanation for why this happens. But I just thought I'd suggest this as a quick fix

edited Nov 20 '12 at 13:04

answered Nov 19 '12 at 15:16

SlashmanX

2,489
18
16

why set margin right to 40px? also the case only happens when going from landscape to portrait, it is fixed when back to landscape – Alex Borsody Nov 19 '12 at 19:24
40px was just a random number I picked. In your case you'll replace it with whatever looks good. If it's only when going from landscape to portrait then just leave the code in for `case 0:` and `case 180:` – SlashmanX Nov 19 '12 at 21:42
i had to do this as opposed to your solution http://stackoverflow.com/questions/5284878/how-do-i-correctly-detect-orientation-change-using-javascript-and-phonegap-in-io – Alex Borsody Nov 20 '12 at 12:54
I'm glad you got this fixed, but you must realise that the top answer on that link and my answer are essentially the same. Both utilize the `onorientationchange` event. EDIT: Whoops, just realised I had a typo in my code. Apologies – SlashmanX Nov 20 '12 at 13:03

score 0 · Answer 2 · answered Nov 25 '12 at 11:24

I think you have to check for the orientation change event and set the desired margins as much as you like this way:

$(window).bind('orientationchange', function(e){

    if(e.orientation){

      if(e.orientation == 'portrait'){

              //do something
              //about your margins for portrait

      }

      else if(e.orientation == 'landscape') {

              //do something
              //about your margins for landscape

      }
   }

});

left margin when rotate to landscape

2 Answers2