Ipad Layout Scales Up When Rotating from Portrait to Landscape

iPad layout scales up when rotating from portrait to landscape

------ Update ------

This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fix that works for iOS6.

------ Original answer ------

Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale

Keep the Markup scalable

<meta name="viewport" content="width=device-width, initial-scale=1">

Then disable scalability with javascript until gesturestart with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone

You also want to add the maximum scale

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

UPDATED
I agree with some of the comments, the declaration should not limit the scaling by the user as this is bad practice. The below is a better approach and I believe that the zooming bug has long since been fixed by Apple.

<meta name="viewport" content="width=device-width, initial-scale=1">

Handling rotation to landscape mode on iPad

As fast walk around you can try to register for notification which came with every rotation.

NotificationCenter.default.addObserver(self, selector:
#selector(YOUR_SELECTOR), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)

And implementation of your selector

if UIDeviceOrientationIsPortrait(UIDevice.current.orientation) {
    print("Portrait")
}

if UIDeviceOrientationIsLandscape(UIDevice.current.orientation) {
    print("Landscape")
}

How do I make iPads not zoom my web page when they rotate?

We have disabled user zooming and have used a media query to tell users to keep their device landscape for the best experience (it's a web based presentation) but if they have the device portrait at all it messes up the scaling when it switches back to landscape and they can't get back to the original state.

Update:

Worked out a fix for this issue. You need to make sure that the viewport meta has maximum and minimum scales set to 1 as well. Eg:

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

---

Related Topics