Javascript Web 应用程序，控制 iPhone 缩放输入焦点和模糊

Question

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

是否有可能控制这两种行为？我读过有关 user-scalable:0 的元数据，但这听起来要么 A) 根本不起作用，要么 B) 完全阻止缩放。

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

我会再次提到，这是一个通用的 Web 应用程序，而不是“iPhone 应用程序”（它基于传统的 Web 技术，而不是 Cocoa 或 Objective-C）。我什至没有 iPhone，也没有可以使用模拟器的 Mac，而且我见过的 Windows 模拟器似乎只不过是图形中的 iframe。

谢谢

Answer 1

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

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

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

并不是说我的视口将“view”作为 id。

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