UniversalViewer
Zooming and scaling must not be disabled on mobile devices
UV version:
v4.2.0-rc2
I'm submitting a:
- [X] bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below
- [ ] feature request => please use the user stories repo
- [ ] support request => Please do not submit support requests here, use stackoverflow
Current behavior:
-
On mobile devices, users are unable to zoom or scale the page using pinch gestures or double-tap due to the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
This behaviour creates an accessibility barrier, especially for users who rely on zooming to read small text or navigate more easily.
-
Running accessibility audits using tools like Vercel, BrowserStack, axe DevTools, and Lighthouse consistently flags this as a critical issue: “Zooming and scaling must not be disabled on mobile devices.”
Expected behavior:
- Users should be able to zoom and scale content on mobile devices as needed. Pinch-to-zoom and double-tap gestures should work by default for better readability and accessibility.
Steps to reproduce:
- Open uv examples on a mobile device (e.g., iPhone, Android).
- Attempt to zoom using pinch or double-tap gestures.
- Observe that zooming is disabled and the content is locked at one scale.
Related code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Other information: Check on this recommended fix
@LanieOkorodudu, I may be mistaken, but is this necessary to enable the pinch zoom to work in OpenSeadragon? I see on a mobile device that I can use standard gestures to zoom and manipulate images displayed in OpenSeadragon. If we removed this meta tag, would these gestures zoom and manipulate the entire page instead of just the image window?
Obviously, I don't mean to dismiss the concern here -- I'm just trying to understand why things are as they currently are, and note a possible trade-off of making the change. I may be entirely mistaken as well -- maybe it's worth opening a PR that removes the tag so we can easily test the behavior and find out for sure... but I'd be interested to hear if there's somebody more familiar with the whole situation who can weigh in.
@LanieOkorodudu, I may be mistaken, but is this necessary to enable the pinch zoom to work in OpenSeadragon? I see on a mobile device that I can use standard gestures to zoom and manipulate images displayed in OpenSeadragon. If we removed this meta tag, would these gestures zoom and manipulate the entire page instead of just the image window?
Obviously, I don't mean to dismiss the concern here -- I'm just trying to understand why things are as they currently are, and note a possible trade-off of making the change. I may be entirely mistaken as well -- maybe it's worth opening a PR that removes the tag so we can easily test the behavior and find out for sure... but I'd be interested to hear if there's somebody more familiar with the whole situation who can weigh in.
@demiankatz, when I used my personal phone to test. I am able to zoom in and out, however some android users can’t. @erinburnand, during your usability testing were all of the participants able to zoom in and out using their phones?
- Opening a PR is good idea to test it again.
@demiankatz, when I used my personal phone to test. I am able to zoom in and out, however some android users can’t. @erinburnand, during your usability testing were all of the participants able to zoom in and out using their phones?
@LanieOkorodudu, I tested with an Android phone and did not have a problem. But as I said, I could only zoom in on images, I could not, for example, make the controls outside of the image window larger.
@LanieOkorodudu all my testers were able to zoom using their phones. I wasn't for some reason, but typically now I tried to replicate the issue, it works as expected. But it did happen initially!
Oh and we used the testers personal phones, so had a good range of apple and android
If that’s the case, do you think we should close the issue and just ignore the accessibility reports?
I suppose my concern is that I don't fully understand what the issue means. But if things are working as we expect, there's not too much else we can do. There will be elements of accessibility requirements that we'll fail on, due to the nature of what UV is, I believe - perhaps this is one of them?
Long way of saying, yes, perhaps close the issue but keep it on our radar (unless @demiankatz thinks otherwise?)
I'd be interested to hear if @crhallberg has any insight on this before we close it.
It's possible that we need the meta tag for the OpenSeadragon extension, but maybe we don't for all extensions. Maybe some would work better without it and others would work better with it. We'd really have to do a side by side comparison to get a sense of the trade-offs (or whether it has any impact at all). Right now we're just going on my unproven theory. :-)
I agree that this meta tag should be adjusted. maximum-scale=1.0, user-scalable=no is restrictive for accessible users. The UV home page has the recommended viewport settings.
To clarify some of what I'm seeing above: this shouldn't affect the UV itself but the example page around it. If someone needs to zoom in to read and change the settings of the demo, they wouldn't be able to do that. OpenSeadragon will handle these gestures well regardless of the meta tag.
