Main content block position messed up on iPad

Question

I'm facing some issues with optimizing a page for usage on the ipad.

Unfortunately (i guess) i have not used em-measurements for my elements, so scaling anything down that way is not an option. The page is very complex and changing it all would not be an option.

Now using ...

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

I can get the page to display quite properly in landscape mode. However, switching to portrait causes the whole page to exceed the viewport size, and to not be scalable to where everything could be seen.

Even if i set "minimum-scale" down to 0.1 i get no proper results.

I am using a centered layout (using margin: 0 auto;) and oddly enough, in portrait mode, my content area seems to stick to the left side of the page, leaving a huge gap to the right. And as mentioned before, i cannot scale the page in a way that allows me to see the whole content area, which is 1026px wide, but ends up being a bit wider as i had to place an image across it, that stretches out to approx. 30px per side.

This is the CSS for my content area:

    position:               relative;
    width:                  1026px;
    height:                 auto;
    top:                    40px;
    margin:                 0px auto;
    border:                 1px solid #e0e0e2;
    box-shadow:             inset 1px 2px 1px 0px #c6c6c6;
    -webkit-box-shadow:     inset 1px 2px 1px 0px #c6c6c6;
    -moz-box-shadow:        inset 1px 2px 1px 0px #c6c6c6;
    -o-box-shadow:          inset 1px 2px 1px 0px #c6c6c6;
    border-radius:          24px 24px 24px 0;
    -moz-border-radius:     24px 24px 24px 0;
    -webkit-border-radius:  24px 24px 24px 0;
    -o-border-radius:       24px 24px 24px 0;
    border-radius:          24px 24px 24px 0;
    background-color:       #ffffff;

I would appreciate any helpful input! Thank You!

Answer 1

I was able to find a working solution for the scaling issue by using this code:

        var detectOrientation=function(_init) {
            var orientation=window.orientation;
            if ((orientation==0||orientation==180)) { /*p*/
                $('viewportDefinition').setAttribute('content','width=1024px,initial-scale=0.7,minimum-scale=0.7,maximum-scale=2.5');
            } else if ((orientation==90||orientation==-90)) { /*l*/
                $('viewportDefinition').setAttribute('content','width=device-width,initial-scale=0.9,minimum-scale=0.9,maximum-scale=2.5');
            }
        };
        window.onorientationchange=detectOrientation;

However, i am still getting a misplaced content area - it is not centered. Using margin: 0 auto; and a fixed width for it, how is this possible?