1

Is there a best practice for this?

Our app is an application form, so there's a series of views with forms that the user fills out and clicks a button to transition to the next view.

What's happening (at least with Chrome on my android, accessing the web app) is that Chrome zooms in while I'm filling out the form--which is helpful--but then it stays at that zoom when I go to the next view. I'd like it to reset to show the whole page.

I can think of two options:

  1. Set <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to prevent scaling at all. First, I haven't tested this yet to confirm that it will prevent the browser from helpfully zooming. Second, accessibility is very important to us, so I'm really not comfortable with this solution.

  2. Reset the zoom somehow (with javascript?) on view load? This seems hacky to me.

Recommendations?

I don't think it's anything about how I'm doing the view transition that's affecting this, but just in case: the button on the form is something like:

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

and the save method in the controller is:

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

where nextSection will be a string like "/questions/2".

isherwood
  • 58,414
  • 16
  • 114
  • 157
denishaskin
  • 3,305
  • 3
  • 24
  • 33

2 Answers2

1

Setting maximum-scale to 1 is an accessibility violation because all text must scale to at least 200% according to WCAG 2 success criteria 1.4.8.

If you set the font size of the input field to greater than 19pt, then it will no longer zoom when focused to edit.

unobf
  • 7,158
  • 1
  • 23
  • 36
  • It is based on experience. There are other posts out there that claim 16px, you might want to try that but test it on all platforms http://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone – unobf Feb 10 '15 at 17:20
0

This question was subject to many interrogations from Chrome Users.

Since Nov, 26 2014, min size for avoiding autozoom feature is 16 points : see minReadableCaretHeight in sourcecode: https://src.chromium.org/viewvc/blink/trunk/Source/web/WebViewImpl.cpp?pathrev=186037

Also read line 4528 to 4531:

A document is considered adapted to small screen UAs if one of these holds:

  1. The author specified viewport has a constrained width that is equal to the initial viewport width.

  2. The author has disabled viewport zoom.

So you should only define :

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

in order to make it ok for your application and disable that annoying feature. User will then still be able to zoom if needed.

Community
  • 1
  • 1
Adam
  • 17,838
  • 32
  • 54