CODEWITHSUNDEEP
javascriptipadsafari
Huangism
Huangism

Reputation: 16438

How do I scale a page on ipad safari correctly? no css involved

My page is 980px, it looks perfect in landscape but in portrait it is cut off. so I tried

<meta name="viewport" content="user-scalable=no, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, width=device-width">

It displays the portrait perfect but in landscape it is too small. I have tried to solve this by using js to detect when orientation changes and resetting the viewport properties, doesn't work or works to an extend but with horrible bugs. I can't use any kind of css media queries because the site is 980 and cannot change.

Is there a way to do what I need? thanks

EDIT

I have tried something like

if (orientation == 0 || orientation == 180) {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=990px");
}
else {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=0.77, minimum-scale=0.77, maximum-scale=0.77, width=990px");
}

the detection of when the ipad is rotating works, but the scaling using viewport never works properly

Upvotes: 2

Views: 3577

Answers (2)

mcfedr
mcfedr

Reputation: 7975

I know you have said you don't want to use css, but assuming thats because you don't want to deal with changing your existing css to work in portrait maybe this could work for you.

@media only screen and (orientation : portrait) {
    body {
        -webkit-transform: scale(0.75);
    }
}

Upvotes: 5

bbedward
bbedward

Reputation: 6478

Won't this work? My web pages are responsive but even on fixed-width pages i have issues with iOS displaying the pages goofy on orientation change that i've solved with:

meta tag

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

Followed by this JS that i found here: http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape (works on iPad if you add the userAgent check.)

iOSZoom.js (requires jQuery)

var mobile_timer = false;
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
    $(window).bind('gesturestart', function () {
        clearTimeout(mobile_timer);
        $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=10.0');
    }).bind('touchend', function () {
        clearTimeout(mobile_timer);
        mobile_timer = setTimeout(function () {
            $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
        }, 1000);
    });
}

then <script src="iOSZoom.js" type="text/javascript"></script> and good as new :D

Upvotes: 1

Related Questions