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>

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

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

实际结果：屏幕放大。

版本： IOS 9

注意：在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网络应用程序在显示键盘时放大旋转

1 个答案: