IOS 显示键盘时，网络应用会在旋转时放大

Question

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

当从主屏幕打开上面的文件并在横向模式下点击输入框，然后旋转 phone 到纵向模式时，屏幕会放大并且无法缩小。在 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

预期结果：屏幕不应放大。

实际结果：屏幕放大。

版本： IOS9

备注： IOS9 之前没有发生。在 Safari 中不会发生，只会在 Web Clip 中发生。

有什么解决方法吗？

Answer 1

在这里找到了解决方案：

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

虽然对我来说不需要加速度计，只需将元内容设置为 "maximum-scale=1" 就可以了：

 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 显示键盘时，网络应用会在旋转时放大

IOS web app zooms in on rotate when keyboard is shown

iphone

ios

web-clips

ios9