在新视图上重置视口缩放？

Question

对此有最佳实践吗？

我们的应用是一个应用程序表单，因此有一系列的表单视图，用户填写并单击按钮以转换到下一个视图。

发生了什么（至少在我的 Android 上使用 Chrome 访问网络应用程序时）是 Chrome 在我填写表单时放大 - 这很有帮助 - 但是当我去下一个视图。我希望它重置以显示整个页面。

我能想到两个选择：

1. 设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 以完全防止缩放。 首先，我尚未对此进行测试以确认它会阻止浏览器进行有益的缩放。 第二，可访问性对我们来说非常重要，所以我对这个解决方案真的不太满意。

2. 在视图加载时以某种方式重置缩放（使用 javascript？）？这对我来说似乎很老套。

建议？

我不认为这与 如何我正在做影响这一点的视图转换有关，但以防万一：表单上的按钮类似于：

<button ng-click="save(sections, nextSection)" type="submit">
Next Step
</button>

而控制器中的save方法是：

$scope.save = function(sections, nextSection) {
  applicationForm.set(sections);
  $location.path(nextSection);
}

其中nextSection 将是一个类似"/questions/2" 的字符串。

Answer 1

这个问题受到了 Chrome 用户的多次询问。

自 2014 年 11 月 26 日起，避免自动缩放功能的最小尺寸为 16 点： 请参阅源代码中的 minReadableCaretHeight： https://src.chromium.org/viewvc/blink/trunk/Source/web/WebViewImpl.cpp?pathrev=186037

另请阅读第 4528 至 4531 行：

如果满足以下条件之一，则认为文档适用于小屏幕 UA：

1. 作者指定的视口有一个约束宽度，等于初始视口宽度。

2. 作者已禁用视口缩放。

所以你应该只定义：

<meta name="viewport" content="width=device-width" />

为了使您的应用程序正常并禁用该烦人的功能。如果需要，用户仍然可以进行缩放。

Answer 2

将 maximum-scale 设置为 1 违反了可访问性，因为根据 WCAG 2 成功标准 1.4.8，所有文本必须缩放到至少 200%。

如果您将输入字段的字体大小设置为大于 19pt，则在聚焦编辑时将不再缩放。