IOS 网络应用程序在显示键盘时放大旋转


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

当从主屏幕打开上面的文件并以横向模式点击输入框,然后将手机旋转到纵向模式时,屏幕会放大并且无法缩小。在 Safari 中打开时不会发生。

重现步骤:1.将书签保存到主屏幕2.从主屏幕打开书签3.将手机切换到横向模式4.点击输入字段,出现键盘5.将手机切换到纵向模式

预期成果:屏幕不应放大。

实际结果:屏幕放大。

版本:IOS 9

笔记:在 IOS9 之前没有发生。在 Safari 中不会发生,只会在 Web Clip 中发生。

有什么解决方法吗?

在这里找到了一个解决方案:

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

虽然对我来说不需要加速度计,但只需将元内容设置为"最大尺度=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 );

最新更新