IOS web app zooms in on rotate when keyboard is shown

1k Views Asked by misha2400 At 21 January 2016 at 16:38

<!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?

Original Q&A

There are 1 best solutions below

misha2400 On 03 May 2016 at 18:16 BEST ANSWER

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 );

IOS web app zooms in on rotate when keyboard is shown

There are 1 best solutions below

Related Questions in IOS

Related Questions in IPHONE

Related Questions in IOS9

Related Questions in WEB-CLIPS

Trending Questions

Popular # Hahtags

Popular Questions