2

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

是否可以控制任何一种行为?我已经阅读了有关 user-scalable:0 的元数据,但这听起来要么 A)根本不起作用,要么 B)完全阻止缩放。

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

我会再次提到这是一个通用的网络应用程序,而不是一个“iPhone 应用程序”(它建立在传统的网络技术之上,而不是 Cocoa 或 Objective-C)。我什至没有可以使用模拟器的 iPhone 或 Mac,而且我看到的 Windows 模拟器似乎只不过是图形中的 iframe。

谢谢

4

2 回答 2

2

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

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

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

然后打开键盘或打开微调器时iphone不会缩放

我目前正在寻找解决它的方法(合并缩放可能性与键盘打开时避免缩放),但我没有找到任何方法来做到这一点......

于 2011-02-25T13:07:07.573 回答
1

我用视口解决了它:正如你所说,当没有启用用户缩放时,打开键盘或组合不会进行缩放,但是你会失去用户的缩放功能。

我在选择组合时禁用视口缩放,然后在一秒钟后恢复缩放选项:

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。

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

于 2012-01-16T08:30:23.117 回答