重置视口缩放新视图？

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

将max-scale设置为1是一种可访问性违规，因为根据WCAG 2成功标准1.4.8，所有文本必须扩展到至少200％。

如果您将输入字段的字体大小设置为大于19pt，那么在专注于编辑时它将不再缩放。

Answer 2

此问题受到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" />

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