Search code examples
iosiphoneios9web-clips

IOS web app zooms in on rotate when keyboard is shown

<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=600,user-scalable=no">
</head>
<body>
<div style="width:570px;height:300px;border:1px solid black" >
<input type=text>
</div>
</body>
</html>

When opening file above from Home Screen and tapping into input box in landscape mode, then rotating phone to portrait mode, screen zooms in and there's no way to zoom out. Doesn't happen when opening in Safari.

Steps to Reproduce:
1. Save the bookmark to file to Home Screen
2. Open bookmark from Home Screen
3. Turn phone to Landscape mode
4. Tap into input field, keyboard appears
5. Turn phone to Portrait mode

Expected Results: Screen shouldn't zoom in.

Actual Results: Screen zooms in.

Version: IOS 9

Notes: Didn't happen prior to IOS9. Doesn't happen in Safari, only in Web Clip.

Any ideas for workaround?

Solution

  • Found a solution over here:

    https://github.com/scottjehl/iOS-Orientationchange-Fix

    Although for me there's no need for accelerometer, simply setting meta content to "maximum-scale=1" does the trick:

     var meta = document.querySelector( "meta[name=viewport]" ),
            initialContent = meta && meta.getAttribute( "content" ),
            disabledZoom = initialContent + ",maximum-scale=1";

        function restoreZoom(){
            meta.setAttribute( "content", disabledZoom );
            
        }
window.addEventListener( "orientationchange", restoreZoom, false );