Question

几年前我创建了一个网络应用程序（通过LAMP后端的JS / CSS / HTML），它一直运行良好。客户端现在正在他的iPhone上使用它，并报告当在具有2个输入的登录屏幕上时，窗口放大“太多”并且当他完成输入时，它不会缩放回到“正常”缩放级别（从他发送的screengrabs看，它看起来像是缩放到“正常”和输入输入时使用的缩放级别之间的某个位置。）

是否可以控制这两种行为？我已经读过关于用户可扩展的元数据：0，但听起来像是A）根本不工作或B）完全阻止缩放。

我会说第二个问题更为关键（在用户输入文字后，它应缩放回“正常”比例）。

我再次提到这是一个通用的网络应用程序而不是“iPhone应用程序”（它建立在传统的网络技术上，而不是Cocoa或Objective-C）。我甚至不拥有iPhone或Mac，我可以使用模拟器，我见过的Windows模拟器似乎只不过是图形中的iframe。

感谢

Answer 1

如果您保留用户缩放选项，则由他返回网站原始缩放比例。 Iphone安装浏览器在纵向模式下进行放大，每次打开键盘或组合框。然后它不会缩放到原始比例（必须通过双击屏幕或捏屏幕来完成......）。

其他选项不允许用户使用视口元标记缩放

     <meta name="viewport" id="view" content="user-scalable=no, width=device-width, initial-scale=1.0" />

然后iphone在打开键盘或打开微调器时不会变焦

我目前正在寻找一种解决方法（在键盘打开时合并缩放可能性和避免缩放），但我没有找到任何办法...

Answer 2

我用视口解决了问题：正如你所说，当没有启用用户缩放功能时，打开键盘或组合键不能进行缩放，但是你会松开用户的缩放功能。

选择组合后禁用视口缩放，然后在一秒后恢复缩放选项：

document.documentElement.addEventListener("touchstart", function (event) {
          if((event.target.nodeName == "SELECT") || (event.target.nodeName == "INPUT") || (event.target.nodeName == "TEXTAREA")) { //it is a combo
                document.getElementById("view").setAttribute('content', 'width=device-width, user-scalable=no');
                setTimeout(function () {
                    document.getElementById("view").setAttribute('content', 'width=device-width, user-scalable=yes');
                }, 1000);
            }
            }, true);

不要说我的视口已将“视图”视为ID。

是的，我知道这不是最佳解决方案，但它有效......

Javascript web-app，控制iPhone缩放输入焦点和模糊

2 个答案: