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